Question

Hi i am trying to apply a background image to a div using jquery. The code i use works fine in all browsers except IE 6 and 7 (the weakest browsers i need to support). If I statically apply a style tag to my div, it does show the image but when i apply it using jquery it does not. I am using IE Tester to test in IE 6 and 7. When I look at the interpreted source code it shows a style attribute with the correct background property on the correct tag.

here is the code i use

HTML:

<div class="overlay">

JQuery:

var img-src = 'url('+$('.img-src').text()+')';
$('.overlay').css('background-image', img-src);

note: i’ve also tried using the key ‘backgroundImage’ instead of ‘background-image’ as a parameter to the css function. Using background-image is what got it to appear in IE 8. Has anyone faced a similar problem and know a work around?

UPDATE: The image i am trying to make appear actually does appear in IE 6, now it’s just IE 7 that’s giving me trouble.

Answer 1

Try this

$('.overlay').css('background-image', $('.img-src').text());