1

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.

aamiri
  • 2,420
  • 4
  • 38
  • 58
  • Your code is invalid. A variable may not be named `img-src` (replace the dash with an underscore). – ThiefMaster Jul 26 '11 at 16:07
  • my variable's name in the actual code is not img-src. I changed the name to comply with my company's confidentiality policy. The real variables name is a single word without any hyphens. – aamiri Jul 26 '11 at 16:50

2 Answers2

1

Try this

$('.overlay').css('background-image', $('.img-src').text());
ShankarSangoli
  • 69,612
  • 13
  • 93
  • 124
0

Have you tried this:

$('.overlay').css('background', img-src + ' no-repeat top left');
locrizak
  • 12,192
  • 12
  • 60
  • 80