PNG background image not showing in IE 8< using

Question

I have the following html code:

<section class="first-content-top">
    <img src="images/img-diner.png" />
    <h1>Menu</h1>
</section>
<section class="first-content-middle">
         <article class="menu">
     </article>
</section>
<section class="first-content-bottom"></section>

With the following type of css:

.first-content-middle 
{
    background: url("images/bg-black.png") repeat;
    margin: 0 0 0 37px;
    padding: 0 20px;
    width: 595px;
}

But in IE8 i still can't see a background image, like i see in IE9 or firefox:

Here's a picture of IE8:

And here is a picture of firefox, how it should be:

I tried the follwing solutions:

To prevent the problem i added the following html5shiv code to the head of the page:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

And in firebug i checked to make sure that the section element has the display:block; property set.

Edit: Adding the height css property to the section fixes the background problem. But the section height is variable. So how do i fix that?

Any suggestions?

Answer 1

you need to set section to display:block in your CSS

With IE, even with the shiv, you need to declare the HTML 5 elements as block elements. I use this line for Internet Explorer, but you can modify it for the elements you need.

header,nav,article,footer,section,aside,figure,figcaption{display:block}

From the Modernizr Documentation: "you’ll also probably want to set many of these elements to display:block;"

from IE not styling HTML5 tags (with shiv)

Answer 2

IE7 and IE8 have native PNG support for alpha-transparencies, but it falls to pieces as soon as opacity comes into the picture. When setting any value for opacity, even 100% (ie. filter: alpha(opacity = 100)), IE fills in the alpha-transparency of the PNG with a pure black fill. This is sometimes refered to as a 'black halo'. The alpha filter can be removed at any time to remove the fill and restore the alpha transparency, but supporting both requires using more of IE's propriatary filters. All of the follow examples should be placed in a IE-targete

/* Normal CSS background using an PNG with an alpha transparency */
#demo {
background:url(ie8-logo.png) 0 0 no-repeat;
}  

Answer 3

This might be related to your issue. Generally IE9 and below doesn't like transparency, opacity.

Surplus in ie7 and ie8 intead of being Transparent while using PNG transparent and opacity

Answer 4

.first-content-middle { background: url("images/bg-black.png") repeat scroll 0 0; margin: 0 0 0 37px; padding: 0 20px; width: 595px; }

remove transparent from background

Answer 5

Your png background image needs to be at least 4x4px.