stretching the background image in IE

问题

I have a background image. I am stretching it so that it fits the entire page.But it is working in browsers other than IE.But if I use background-size, it is working in IE9. But I want it to work in IE8. How to do this? Thanks in advance.

In other browsers and in IE9:

In IE8:

You can find the difference at the bottom of the page. Here is my code:

body, html{
    height:100%;
    padding:0;
    margin:0;
}

body.BodyBackground {

    margin: 0px;
    background: url(../images/common/header/Background_color.png);
     background-repeat:repeat-x;
    background-attachment:fixed;
    background-position:top center; 
    height: 100%;
    width: 100%;
    border: 0;
    background-size:contain;
    display:inline-block;
    background-color: transparent;


}

div.content{    
    height:100%;
    width:97%;
    background-color: rgb(255, 255, 255);
    margin: 0px 25px 25px 25px;
    height:470px;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;

}

回答1:

IE8 does not support background-size property.

You have the following options:

Use a background graphic that doesn't need stretching.
Provide IE8 with a different background image (or no background image at all)
[edit] See my blog post on the subject for more info on how to achieve this in pure CSS with no browser hacks.
Ignore the problem and let IE8 users see a slightly broken site.
Use a polyfill script like CSS3Pie to add the background-size feature to IE8.

If you really want to use background-size, and you really need to support IE8, then the last of those options is probably the best one for you.

回答2:

CSS3 is going to implement a background-size attribute. But it isn't supported in IE<9.

If you want to scale a background gradient, you may use the img element because it is scaling. Instead of using a background to display the PNG, you now use an img element, and set the width and the height to 100%.

I think that this is what you want:

* {
  margin: 0;
  padding: 0;
}

html, body {
    height: 100%;
}

#page {
    position: relative;
    min-height: 100%;
}

#page img {
    background-color: transparent;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
}

The markup:

<body>
    <div id="page">
        <img src="../images/common/header/Background_color.png" alt="" />
    </div>
</body>

回答3:

Whilst like other answers state background-size is not supported is true. There are other ways this can be achieved.

You can use the following to achieve stretched backgrounds in old IE.

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

Other sizing options for sizingMethod:

crop Clips the image to fit the dimensions of the object.
image Default. Enlarges or reduces the border of the object to fit the dimensions of the image.
scale Stretches or shrinks the image to fill the borders of the object.

It is important you do not use this on the html or body tag. Instead, create a fixed position div with 100% width and height.

来源：https://stackoverflow.com/questions/16478693/stretching-the-background-image-in-ie

标签

internet-explorer

css

background-image