html - 当我已经在使用背景时，将图像平铺在整个页面上

Question

我已经设置了一些背景 div 来为我正在制作的博客设置主题。我为标题使用了 3 种颜色，灰色背景，我想为背景添加纹理。我有我想要平铺的半透明图像，但我不确定完成这项工作的最佳方式。我不希望 position: fixed; 在包含图像的 div 上，这样它会随着你滚动而移动。

示例代码: http://jsfiddle.net/YPXmT/

有没有办法在没有滚动条的情况下实现这一点？ (请注意，我不想摆脱滚动条，因为内容可能需要滚动。)

Answer 1

从您的示例 fiddle 开始，您已经完成了大部分工作。您所要做的就是让您的 backgroundTexture div height 和 width 100% 而不是您使用的静态像素值:

#backtexture {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background : url('http://static.tumblr.com/wyzt2fm/Hq8mhgfry/hp_asset_diagonalline.png');
}

---

更简单的更新:
大多数时候，简单是最好的。
您需要做的就是添加:

body{
    position: relative
}

不要像下面那样制作容器 div 和重新排列元素，只需使 body 的位置相对就可以解决这个问题。

---

更新: (使用上面的更新，为后代保留)
根据下面的评论，使用上面的代码，任何使窗口滚动到可见空间之外的内容都不会包括背景。这是因为 div 设置为 position: absolute 和 height/width: 100%。 div 的大小将调整为可视空间的大小，但超出该范围的任何内容都会导致背景 div 看起来好像已停止。要解决此问题，您只需稍微调整一下 HTML 和 CSS。代替上面的 CSS 使用:

#backtexture {
    width: 100%;
    height: 100%;
    background : url('http://static.tumblr.com/wyzt2fm/Hq8mhgfry/hp_asset_diagonalline.png');
}

注意我们删除了 position:absolute 和 overflow:hidden。接下来我们更改 HTML，使背景不仅仅是放置在页面上的空 div，而是用作页面上所有其他元素的容器:

<div id="backtexture">
        <div id="redtop"></div>
        <div id="orangetop"></div>
        <div id="yellowtop"></div>
        <div id="wrapper">
</div>

那应该就可以了。

fork fiddle :http://jsfiddle.net/digthedoug/pVxSq/