Question

我为我的一个网站设计了一个背景图片（底部有沙子的水图案），其宽度为230像素，高度为1230像素。

我想要的是这张图片

重复本身水平以填充整个100％宽度
但拉伸本身到浏览器窗口的100％高度。

所以，我做的是

<div style="position: fixed; top: 0; height: 100%; width:100%; z-index: -100;
 background-image:url(bg.jpg); background-repeat: repeat-x"> </div>

但不幸的是，这并没有将DIV的高度拉伸到当前的浏览器窗口。

我看到的唯一方法是在其中编写一个包含多个IMG标记的div：

<div style="position: fixed; top: 0; height: 100%; overflow: hidden; 
width: 5000px; z-index: -99" align="left">
<img src="bg.jpg" style="height:100%" alt=""/>
<img src="bg.jpg" style="height:100%" alt=""/>
<img src="bg.jpg" style="height:100%" alt=""/>....and so on...</div>

这有点像预期......但这不是正确的做法？考虑到可访问性这是一场噩梦，不是吗？

感谢您的帮助！

Answer 1

为您的目的创建了一个jsfiddle：

http://jsfiddle.net/aT6J6/

试着玩，也许这符合你的要求。

element
{
    background-size: 100%;
}

为你举例：

<div>
    <div style="position: fixed; top: 0; height: 100%; width:100%; z-index: -100;background:url('http://www.noupe.com/wp-content/uploads/2009/10/pattern-13.jpg') repeat-x scroll 0 0 / 100% auto rgba(0, 0, 0, 0)"> 
    </div>
</div>

更新小提琴：

http://jsfiddle.net/aT6J6/1/

背景图片：高度拉伸100％的窗口，宽度重复

1 个答案: