css - 用背景填充整个动态 DIV(可能有不同的大小)

Question

我有一个 div，它的宽度和高度取决于浏览器窗口的大小。

我需要一个跨浏览器的解决方案来用背景图片填充整个 div。图像不应重复自身，而是在垂直和水平方向上拉伸(stretch)/收缩自身。

谢谢!

---

我为所有感兴趣的人提出了一个跨浏览器的解决方案。

代码如下:

<div id="content">    
<div style="width:100%;height:100%;position: fixed;left: 0px;top: 0px;z-index: -1;">
    <img src="wallpaper.jpg" style="width:100%;height:100%;" alt="" /> 
</div>

Line 1<br />Line 2<br />Line 3</div>

祝你好运!

Answer 1

使用:

#myDiv {
    background: url('...XXX') no-repeat;
    background-size: 100% 100%;
}

请注意它是 CSS3:“背景大小属性在 IE9+、Firefox 4+、Opera、Chrome 和 Safari 5+ 中受支持。”