andryuha andryuha - 5 months ago 9
CSS Question

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');
});
});
});

Answer

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.