Background-Image CSS Fails to Display in Ie7 & 8

Background-image css fails to display in IE7 & 8

As this is my first responsive design, I have had to use media queries to adapt the css based upon the screen/viewport size. It appears that only the "media="'screen'" and "media='print'" declarations work in IE7 and IE8 meaning my declaration of : will not work. This is the reason my background-images are not displaying because IE7 and 8 do not understand this declaration and therefore ignore it. Thanks for the other valid answers guys but they are things I already knew about and had tried.

Background image css not display in IE7, IE8

rgba not supported in IE7/ IE8
http://css-tricks.com/rgba-browser-support/

CSS background-size not working in IE7/8

That's because background-size is a CSS3 property which isn't supported before IE9.

However, there is a thread which suggests a possible workaround:
How do I make background-size work in IE?

Background image not showing IE8

CSS3 multiple background isn't supported by IE 8 and below. So the comma separated background value it's invalid thus will not work.

And it does not work on IE9, even when it support multiple backgrounds (buggy but it does) because IE9 does NOT support CSS3 Gradient so again it makes entire declaration invalid.

I suggest you use !important on the multiple background declarations but make a single background declaration as last in the line, so IE9 and below can display at least one of the BG's:

background: url('/images/cartWhite.png') 18px 11px no-repeat, -ms-linear-gradient(top,#74c163,#1d7a09) !important;
background: url('/images/cartWhite.png') 18px 11px no-repeat, -moz-linear-gradient(top,#74c163,#1d7a09) !important;
background: url('/images/cartWhite.png') 18px 11px no-repeat, -webkit-linear-gradient(top,#74c163,#1d7a09) !important;
background: url('/images/cartWhite.png') 18px 11px no-repeat, linear- gradient(top,#74c163,#1d7a09) !important;
background: url('/images/cartWhite.png') 18px 11px no-repeat; /* for IE9 and below */

---

As another option, you could use CSS3Pie. Example:

#myElement {
    behavior: url(http://path/to/pie/PIE.htc);
    background: url(bg-image.png) no-repeat #CCC; /*non-CSS3 browsers will use this*/
    background: url(bg-image.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
    background: url(bg-image.png) no-repeat, -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
    background: url(bg-image.png) no-repeat, -moz-linear-gradient(#CCC, #EEE); /*gecko*/
    background: url(bg-image.png) no-repeat, -ms-linear-gradient(#CCC, #EEE); /*IE10 preview*/
    background: url(bg-image.png) no-repeat, -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
    background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
    -pie-background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*PIE*/
}

Keep in mind it will only work if url of behavior is on the same domain. Read more.

Why is my background image not displaying properly in IE7?

I agree with FutureKode. The background on #modal-inner-content isn't displaying because IE doesn't think the element hasLayout, which sometimes causes problems with other style declarations. To trigger hasLayout, the easiest way I see would be to style that div with width:576px (what Firebug is telling me the width of that div is). I'm assuming the width of that box never changes?

More on hasLayout, and what triggers it: http://www.satzansatz.de/cssd/onhavinglayout.html

---

Related Topics