Background-image css fails to display in IE7 & 8

问题:

For some reason I'm having issues displaying a background image in IE 7 and IE8. In IE9 and more modern browsers it works and outputs the following:

(The CSS produces the grey bordered elements around the Login)

However in IE7 and IE8 all I get is the following:

I cannot remember having this issue with other sites that I made cross-compatible but then again I try and avoid using images nowadays to save on page load times.

My CSS is as follows:

#contentright .panel {
   background-image: url("/incl/images/bg_panel200.gif");
   background-repeat: no-repeat;
}


#contentright .panelbottom {
background-image: url("/incl/images/bg_panelbottom200.gif");
background-position: center top;
background-repeat: no-repeat;
}

I did a quick Google search and some previous Stack Overflow answers have suggested amending the CSS to the the following format:

 background: url('/incl/images/bg_panelbottom200.gif') no-repeat center top;

However this doesn't appear to work either.

Thanks in advance.

回答1:

Try using display:block for the elements and set the width and the height also use border:none; background-color:transparent

回答2:

You need to specify the height of the div background for it to show in older versions of IE.

回答3:

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.