100% 高度的背景图像：需要填充页面答案

【问题标题】：Background Image with 100% height: Need to fill page100% 高度的背景图像：需要填充页面
【发布时间】：2013-03-04 05:31:24
【问题描述】：

我有一个小的 .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/

【问题讨论】：

您使用 CSS-Pseudo-Selector :after 附加背景是否有特定原因？这不适用于许多较旧的浏览器。另外我想知道为什么它绝对定位。我只需将 background-img 放在 body 标记中，甚至是页面上的第一个容器 div 中。
我不关心旧浏览器。我正在使用after，因为这就是您可以在html 元素上使用不透明度而不影响子元素的方式。见：css-tricks.com/snippets/css/transparent-background-images

标签： css image background

【解决方案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;
}

【讨论】：

我认为图像已经从问题文本中重复。
是的，@Philzen。这不是我的问题的解决方案。
如果你想在整个页面中制作背景图片，只需在正文中添加body { background-image: url('http://www.example.com/img/background.png'); background-repeat:repeat; }
在我的 chrome 或 firefox 版本中不起作用。不过，谢谢你的想法。
欢迎你，如果你能展示一个小提琴，那么我们可以玩，也许它会有很大的帮助

【解决方案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

【讨论】：

这不起作用。请参阅上面的小提琴以帮助您提出任何想法。谢谢！

【解决方案3】：

您可以通过在您的html:after 中提供backgroun-size:100% 来达到您想要的结果

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

【讨论】：

这不起作用。因为图像很小且重复。请参阅上面的小提琴。谢谢！