0

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>
sandorfalot
  • 1,042
  • 1
  • 10
  • 19
  • 1
    `background-size: contain;` is not supported by ie8; http://caniuse.com/#feat=background-img-opts – Nico O Aug 02 '14 at 10:05

1 Answers1

2

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')";
Alessandro Incarnati
  • 7,018
  • 3
  • 38
  • 54
  • 1
    Thank you. That seems to almost work, but its still not touching the bottom of the browser window, and when I resize the window, it cuts off the bottom of the image. I'm thinking there's an error in my CSS – sandorfalot Aug 02 '14 at 10:10
  • Oops. I tried that and now it fits the entire screen, not just the container. (Sorry, IE was blocking the initial script and when I unblocked it, the image took up the entire screen) – sandorfalot Aug 02 '14 at 10:11
  • Then you need to vote the answer and not repost my answer applied to your code :) It's polite you know ;) – Alessandro Incarnati Aug 02 '14 at 10:18
  • Sorry about that. When I set the width in the div, it scales to that size. I want to set the height and have the width stay in the original scale of the image. The image is sitting in the left corner of the screen, and if I use width:100%, it works in Chrome, but in IE8 it scales to the entire screen. Any ideas? Thank you. – sandorfalot Aug 02 '14 at 10:35