css - 100% 高度的背景图像 : Need to fill page

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;
}

感谢您的想法。

---

编辑:

这是我需要重复的图像:

这是一个 fiddle :

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;
}