Jquery – how do i change css background image using jquery

background-imagecssjquery

$(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?

Best Answer

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.

Related Topic