Search code examples
htmlcsscontain

Background-size contain not working in internet explorer

I'm using Chrome and the code works fine, however, when I load it into Internet Explorer, it shows the image at it's actual size, not scaled to fit the screen. I want the image to be on the left side of the page and cover top to bottom, but not left to right. I want it to stay so the image is scaled properly. Here's what I've got. Is there a simpler way? I'm using Internet Explorer 8. ETA: The image is 340x554px

<!DOCTYPE html>
<html>
<head>

<style>
body{
background-color:#000000;
}

#logo{
top:0;
bottom:0;
left:0;
position:absolute;
background-image:url('logo.jpg');
background-size: contain; 
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-repeat:no-repeat;
height:100%;
width:100%;
}

</style>
<title>Title</title>
</head>
<body>
<div id="logo">

</div>


</body>
</html>
Solution

  • You can use this fix for IE8 in case you are not using sprites and there is no link inside the container where you have applied the background:

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

    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='images/image.jpg',
    sizingMethod='scale')";