how do i change css background image using jquery?

Question

$(document).ready(function() {
    $('#picture').css('height', '666px');
    $('#picture').click(function () {
        $(this).css('background-image', "url('../images/picture_2.jpg')");
    });
});

in the above code, the height is successfully changed to 666px but the background image does not change at all (remains the original one).

When I change the background-image to 'none' instead of "url('../images/picture_2.jpg')" it does make the background image disappear though.

What am I doing wrong?

possible duplicate [question](http://stackoverflow.com/questions/253689/switching-a-div-background-image-with-jquery) — Danferth, Jan 09 '12 at 20:13

score 5 · Accepted Answer · answered Jan 09 '12 at 20:12

My guess is that the URL you're putting in is incorrect. The URL should be relative to the page you're on. I bet your URL is relative to your CSS style sheet. In general, just use absolute paths when doing this in JS.

You also don't need the single quotes surrounding the path.

score 2 · Answer 2 · answered Jan 09 '12 at 20:20

2

The code you provided should work fine. I think the image location you mentioned ../images/picture_2.jpg is incorrect. Check if you could see the image from that location in firebug.

I tried the same code and it worked fine for me. DEMO here

answered Jan 09 '12 at 20:20

Selvakumar Arumugam

79,297
15
120
134

score 1 · Answer 3 · answered Jan 09 '12 at 20:14

1

Correct the path to the image.

Path to the image will be calculated from the root of the site, not from the css.

Just to clarify :

Height will change on the load of the page, Where as Background image will change only if #picture element will be clicked.

answered Jan 09 '12 at 20:14

Mandeep Pasbola

2,631
2
26
50

score 0 · Answer 4 · answered Jan 09 '12 at 20:25

0

Here is a demo, which works for me.

How does this differ from what you've tried?

answered Jan 09 '12 at 20:25

Brigand

84,529
20
165
173

how do i change css background image using jquery?

4 Answers4