html - Multiple backgrounds - Second image not displaying in IE7 and IE8 -

i've got following code supposed display 2 images; 1 on top left , 1 on top right. in ie7 , ie8 top left image 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; } 

adding more details

you can use mordenizer older browser degrade gracefully, http://modernizr.com/docs/#features-css

how work mordenizer

install modernizr, download file page. then, on site’s head tag, add link file. example:

modernizr not “magic”. tests browser , evaluates capability supporting on twenty different css3/html5 features. based on result of check, library adds web page’s element set of css clases (and javascript objects well) indicate if browser support or not given feature.

for example if css looks this

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

using modernizr, css instead 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 create - on fly - 2 different css classes, based on support browser provides “background” property,the library makes easy use - conditionally - “background” property.

i hope explains usage.