dynamically switching 'background-image' doesn't work in IE

I'm dynamically switching a div's background-image with the jquery bit below. Works just fine in FF, but turns out in IE it does not. Any ideas why? Does IE not reload the image if a css property changed? Any pointers would be appreciated.

$(function(){
   $('.header').each(function(){
      $(this).hover(function(){
         $('#headertab').css('background-image','url(/tab_'+$(this).attr('href').split('path=')[1]+'.gif');
     开发者_高级运维 });
   });
}); 

---

Try setting backgroundImage instead of background-image.

CSS attributes, when accessed via Javascript, traditionally use camelCase instead of dashes, to avoid questions of syntax. (element.style.background-image looks like you're doing subtraction.) Firefox is probably progressive enough to allow the dashes as well, but IE... it would seem not.

---

I had an issue where an element had a predefined style-attribute setting a background image:

<div id="bg-element" style="background-image: url(foo.jpg);"></div>

The background-image rule could be changed using jQuery but the image would not update.

The solution was to first remove the attribute and then add the attribute again with the new value:

jQuery('#bg-element').removeAttr('style').attr('style', 'background-image: url(bar.jpg);');

---

You're setting CSS properties incorrectly with jquery. You can read here how to reference the names of the properties (camelcased, with no hyphen).

$("#element").css({"backgroundImage":"url(/images/image.jpg)",....etc})

---

if you have the images paths set inside the VALUE of a SELECT listbox element, you could probably use:

<select onchange="document.getElementById('background').style.backgroundImage='url(&quot;'+this.value+'&quot;)';">

---

I usually use class names to handle this sort of thing:

$(function(){
   $('.header').each(function(){
      $(this).hover( function () {
        $('#headertab').addClass('dynamic-background-image-class');
      }, function () {
        $('#headertab').removeClass('dynamic-background-image-class');
      });
   });
}); 

css:

.dynamic-background-image-class {
  background: transparent url(/path/to/image.png) 0 0 no-repeat;
}

I don't know if this would help your situation as your header image names are based on the url. One of the benefits is the image is pulled and cached when the css file is requested by the client.