CODEWITHSUNDEEP
jquerycss
LucyViolet
LucyViolet

Reputation: 1071

using jQuery to change a background image

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?

Upvotes: 8

Views: 22983

Answers (3)

Karthik Dhanasekaran
Karthik Dhanasekaran

Reputation: 210

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

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

Upvotes: 6

Ganya
Ganya

Reputation: 9

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');

Upvotes: -1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167240

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.

Upvotes: 9

Related Questions