Multiple backgrounds - Second image not displaying in IE7 and IE8

Question

I've got the following code which is supposed to display two images; one on the top left and one on the top right. In IE7 and IE8 only the top left image is being displayed.

<div id="header"></div>

#header {
    background-image: url('img/image1.png'), url('img/image2.png');
    background-position: left top, right top;
    background-repeat: no-repeat;
    background-color: #97C032;
}

Answer 1

Adding with more details

You can use Mordenizer to help the older browser degrade gracefully, http://modernizr.com/docs/#features-css

how to work with mordenizer

install Modernizr, download the file from this page. Then, on your site’s head tag, add a link to the file. For example:

Modernizr does not do anything “magic”. It simply tests the browser and evaluates its capability for supporting over twenty different CSS3/HTML5 features. Based on the result of this check, the library adds to the web page’s element a set of CSS clases (and some JavaScript objects as well) that indicate if the browser support is or is not a given feature.

for example if your css looks like this

#header {
    background: url(background-one.png) top left repeat-x,
    url(background-two.png) bottom left repeat-x;
}

Using Modernizr, your CSS will look instead like this:

#header{
    background: url(background-one.png) top left repeat-x;
}
.multiplebgs #header{
    background: url(background-one.png) top left repeat-x,
    url(background-two.png) bottom left repeat-x;
}

Modernizr will create - on the fly - two different CSS classes, based on the support that the browser provides for the “background” property,the library makes it easy to use - conditionally - the “background” property.

I hope this explains usage.