using jQuery to change a background image

Question

I am trying to use jQuery to change the background image in a table cell, the table cell has its own class of ".active". I am using jQuery to change other elements in the same place and they all work fine so i think i must have something wrong in the syntax. the function i am using executes after a button is clicked. my code:

function vehicle(arg){
  $(".active").css("color", "blue");  
  $(".active").css("background-image", "url(../img/car.png)");
};

css:

.active{
  background-size: 10px 10px;
  background-repeat: no-repeat;
  border-right: 1px solid none;

the first line executes fine, i have tried the following code plus changed the picture size in every way i can think of :

   $(".active").css("background-image", "../img/car.png");
   $(".active").css("background-image", "url('../img/car.png')");

can anyone point out what i did wrong?

Possible duplicate of [Switching a DIV background image with jQuery](http://stackoverflow.com/questions/253689/switching-a-div-background-image-with-jquery) — miguelmpn, Feb 08 '16 at 10:03
If your problem is solved now, consider accepting the answer that helped you to that end the most with the green Checkmark symbol next to the vote count. Please [accept the answer](http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work/5235#5235) to signify that this is solved. You also get 2 reputation points for doing so. — Praveen Kumar Purushothaman, Feb 09 '16 at 11:33

score 9 · Answer 1 · answered Feb 08 '16 at 09:59

9

You need to put the .css() relative to the page. So try:

$(".active").css("background-image", "url('img/car.png')");

Assuming the img/ is in the same directory as the page, this should work. Else use the relative paths to the root.

answered Feb 08 '16 at 09:59

Praveen Kumar Purushothaman

160,666
24
190
242

its odd, if i use the ',' in between "background-image"and "url('img/car.png')" the code at the begining of my script wont run, but if i use a : my other code works but the background wont work – LucyViolet Feb 09 '16 at 09:03
@LucyViolet Using `:` is for objects. I have used a function here. – Praveen Kumar Purushothaman Feb 12 '16 at 09:09

score 5 · Answer 2 · edited Jul 23 '18 at 07:59

5

You can also try the below syntax to set the background image dynamically

$(".active").attr("style", "background-image: url('your url')");

edited Jul 23 '18 at 07:59

Praveen Kumar Purushothaman

160,666
24
190
242

answered Mar 16 '18 at 02:40

Karthik Dhanasekaran

180
1
10

score -1 · Answer 3 · edited Feb 08 '16 at 11:35

-1

You can set a CSS class to change the image.

CSS:

.img1{
    background-image:img/car1.png;
}

.img2{
    background-image:img/car2.png;
}

jQUERY:

$(".active").removeClass('img1').addClass('img2');

edited Feb 08 '16 at 11:35

Tushar

82,599
19
151
169

answered Feb 08 '16 at 10:01

Ganya

9
2

2

That's not the question. first u can't add a background-image like that, and create a class per image is not a good way. he just want to have the good url. – Alexis Feb 08 '16 at 10:08

using jQuery to change a background image

3 Answers3