stretching the background image in IE

2019-08-31 18:56发布

站内问答 / CSS3
1906 3 4

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: enter image description here

In IE8: enter image description here

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;

}

3条回答
Juvenile、少年°
2楼-- · 2019-08-31 19:06

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>
查看更多
0人赞 添加讨论(0) 举报
我只想做你的唯一
3楼-- · 2019-08-31 19:10

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.

查看更多
0人赞 添加讨论(0) 举报
Bombasti
4楼-- · 2019-08-31 19:19

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)