100％高度的背景图像：需要填充页面

Question

我有一个小的.png文件重复形成背景图片。我需要将页面的body高度设置为100％才能在我的内容包装器上使用min-height属性。但是，尝试将背景图像与height:100%结合使用会导致在滚动页面时图像被切断。看图片详细说明我的意思：

背景在上面 但滚动时会被切断

即使在用户向下滚动后，如何在整个页面上重复显示背景图像？这是css：

body {  
    background-color:#9AAEBF; 
    overflow-y:scroll;
    height:100%;
}

html:after {
    background-image: url('http://www.example.com/img/background.png');    
    opacity:0.4;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

感谢您的想法。

---

编辑：

这是我需要重复的图像：

这是一个小提琴：

http://jsfiddle.net/Nick_B/x2h3g/

Answer 1

试试这个

html:after {
    background-image: url('http://www.example.com/img/background.png');    
    background-repeat:repeat;
    opacity:0.4;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

Answer 2

现在使用到background-size

就像这样

body {  
    background-color:#9AAEBF; 
    overflow-y:scroll;
    height:100%;
}

html:after {
    background-image: url('http://i.stack.imgur.com/iuzZU.png'); 
    background-size:100%;
    opacity:0.4;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

<强> Demo Full page

<强> Live Demo

Answer 3

您可以通过backgroun-size:100%

中的html:after来获得所需的结果

<强> CSS

html:after {
    background-image: url('http://i.stack.imgur.com/iuzZU.png'); 
    background-size:100%;
    opacity:0.4;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}