Tuesday, August 4, 2009

Can't set / change CSS background image with jQuery problem solution

Hello everyone. I’ve been busy lately with some projects and could not write much on “jQuery HowTo” blog. So, when I came across this little problem, I thought I would share it with you.

Anyway, I was working on one of my projects and I needed to set a background image using jQuery on some div. At first my background setting code looked like this:

$('#myDiv').css('background-image', 'my_image.jpg');
// OR
$('#myDiv').css('background', 'path/to/image.jpg');

But to my surprise it didn’t do the trick. My div’s had no background images. FireBug showed no CSS background properties set and I could not see why background images were not being set by jQuery. Anyway, after 10-20 minutes I realized that jQuery sets CSS properties as key : value and in our case valued had to be in url(image.jpg) form.

Solution to “background images are not being set” problem is to set them like this:

$('#myDiv').css('background-image', 'url(my_image.jpg)');
// OR
$('#myDiv').css('background', 'url(path/to/image.jpg)');
at

13 comments:

  1. AnonymousAugust 4, 2009 at 3:46 AM

    shouldn't it be backgroundImage?

    ReplyDelete
  2. Jean-Philippe MartinAugust 4, 2009 at 3:58 AM

    you know what is needed ? A javascript code compiler. This error would have raised a warning.

    ReplyDelete
  3. AnonymousAugust 4, 2009 at 4:20 PM

    Thanks for the trick. It seems little but its affect will be grand. :)

    ReplyDelete
  4. UzbekjonAugust 6, 2009 at 4:30 AM

    @Anonymous, You can use hyphen version of any CSS property in your .css() function if you suround it with quotation marks.

    @Jean-Philippe Martin, I'm afraid it wouldn't, since it is not a JavaScript error but wrong CSS rule. Javascript would not throw any exceptions, I believe...

    @Anonymous, totally agree :)

    ReplyDelete
  5. null.zeroAugust 12, 2009 at 10:34 PM

    hi there, great site!
    i use hover and css() to change background on mouse over, but can't make it to preload the images automatically. do you have any suggestions? i use filename_off.jpg and filename_on.jpg for both states.

    ReplyDelete
  6. UzbekjonAugust 16, 2009 at 11:47 PM

    @null.zero, you can actually do this with CSS. Just combine those 2 images into one and just change object's class from .on to .off with jQuery. In your CSS file define rules that change the background position, similar to this:

    .on{
    background:url(onOff.jpg) 0 0 no-repeat;
    }
    .off{
    background:url(onOff.jpg) 0 30px no-repeat;
    }

    Basically you need to move the bg image so that the bottom image shows up... or instead you can read my "Preload images with jQuery" post.

    ReplyDelete
  7. null.zeroAugust 17, 2009 at 9:48 PM

    @Uzbekjon: yeah, i know that, but if i have a portfolio page with 30 images i have to define 60 styles which is non-sense. i decided to do it with a simple preload function in jquery, and preload them manually. for now :)

    ReplyDelete
  8. FrançoisSeptember 1, 2009 at 6:18 AM

    thank you that saves my tuesday !

    ReplyDelete
  9. UzbekjonOctober 12, 2009 at 5:11 AM

    @null.zero, I see... :)

    @frankbret, Glad the post helped you :)

    ReplyDelete
  10. AnonymousFebruary 22, 2011 at 5:21 AM

    Thanks a lot! You saved me hours!

    ReplyDelete
  11. sangitaMay 20, 2011 at 5:51 AM

    Thanks.....it worked nicely :)

    ReplyDelete
  12. AnonymousAugust 12, 2011 at 5:39 AM

    $('#myDiv').css('background', 'url(path/to/image.jpg)');

    Man the above code is really working.Thank u so much.

    ReplyDelete
  13. SlodgeNovember 3, 2011 at 2:02 AM

    Thanks for posting this - still helping 2 years later :)

    ReplyDelete