背景大小 100% 在 IE8 和 IE7 中不起作用

我有一个空的 div，其中包含比容器大小更大的背景图像。我通过以下方式解决这个问题background-image具有值 (100% 100%) 的属性。直到您在 IE8 和 IE7 中打开示例为止都没有问题。有什么解决方案吗，甚至是 javascript 脚本或 jquery 插件？

i.e: http://jsbin.com/imirer/1/edit

i.e: http://jsfiddle.net/bPTzE/

HTML:

<div class="container">
    <div class="background"></div>
</div>

CSS:

.container {
    /* an example width for responsive perpose */
    width: 500px;
}

.background {
    height: 27px;
    background: url("http://s18.postimage.org/jhbol7zu1/image.png") no-repeat scroll 100% 100% transparent;

    /* not working in IE8 and IE7 */
    background-size: 100% 100%;
}

由于背景大小是 CSS3 特定的，IE 不支持它，因此您必须执行类似的操作才能在 IE 中工作

将你的 html 和 body 设置为

html {overflow-y:hidden}
body {overflow-y:auto}

用 div #page-background 包裹您想要全屏显示的图像

#page-background {position:absolute; z-index:-1}

然后将其放入您的 html 文件中

<div id="page-background">
  <img src="/path/to/your/image" width="100%" height="100%">
</div>

** 您将必须使用某种重置来删除边距和填充，如下所示

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