Background-image css fails to display in IE7 & 8

Question

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:

Answer 1

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

Answer 2

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

Answer 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.