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?

try removing single quotes from inside of the url()

bobek
– bobek

2012-01-09 20:12:15 +00:00
Commented Jan 9, 2012 at 20:12 — bobek
– bobek, Commented Jan 9, 2012 at 20:12
Which browser? It might just not be loading it..

Brigand
– Brigand

2012-01-09 20:12:48 +00:00
Commented Jan 9, 2012 at 20:12 — Brigand
– Brigand, Commented Jan 9, 2012 at 20:12
@FakeRainBrigand chrome and internet explorer 8

Simon Suh
– Simon Suh

2012-01-09 20:13:31 +00:00
Commented Jan 9, 2012 at 20:13 — Simon Suh
– Simon Suh, Commented Jan 9, 2012 at 20:13
possible duplicate question

Danferth
– Danferth

2012-01-09 20:13:42 +00:00
Commented Jan 9, 2012 at 20:13 — Danferth
– Danferth, Commented Jan 9, 2012 at 20:13

maxedison · Accepted Answer · 2012-01-09 20:12:46Z

5

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.

answered Jan 9, 2012 at 20:12

maxedison

17.6k15 gold badges72 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Selvakumar Arumugam · Accepted Answer · 2012-01-09 20:20:36Z

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 9, 2012 at 20:20

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

Comments

Mandeep Pasbola · Accepted Answer · 2012-01-09 20:14:44Z

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 9, 2012 at 20:14

Mandeep Pasbola

2,6392 gold badges27 silver badges50 bronze badges

Comments

Brigand · Accepted Answer · 2012-01-09 20:25:15Z

0

Here is a demo, which works for me.

How does this differ from what you've tried?

answered Jan 9, 2012 at 20:25

Brigand

86.4k20 gold badges167 silver badges174 bronze badges

Collectives™ on Stack Overflow

how do i change css background image using jquery?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related