Why image doesn't show up within a DIV in IE8

Question

I have the following HTML:

<!-- default stylesheets -->
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle.css">

<!-- if ie version 9 or less -->

<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle_ie.css">
<![endif]-->

<div id="subpageHeaderImageSection">
    <div id="subpageHeaderLeft">
        <img id="igm" src="theImages/subpageHeaderImage.png" />
    </div>
</div>

defaultStyle.css :

#subpageHeaderImageSection {
    position: relative;
    top: 0;
    width: 100%;
    height: 400px;
}
#subpageHeaderLeft {
    position: absolute;
    left: 0;
    float: left;
    width: 100%;
    height: 100%;
    background: url('../theImages/subpageHeaderImage.png') no-repeat;
    background-size: 100% 100%;
}
#igm {
    display: none;
}

defaultStyle_ie.css :

#subpageHeaderImageSection {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
}
#subpageHeaderLeft {
    position: absolute;
    left: 0;
    top: 0;
    float: left;
    height: 100%;
    width: 100%;
    background: none;
}
#igm {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    top: 0;
    left: 0;
}

I had to add an image for the IE because the background-size: property is not yet supported.

If I remove the display: none from the defaultStyle.css , the IE8 shows it correctly but the other browsers stretches the images fully. If I keep it, the other browsers displays it correctly but IE8 doesn't display the image at all.

How do I fix the above so it works for all browsers?

Answer 1

To control size in ie < 9 you must use the filter property in css

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/myimage.png', sizingMethod='scale');

and still use background-size. It will read the background-size of 100% in this case and use it