100％身高的背景图片：需要填写页面

我有一个小的.png文件，重复形成背景图片。我需要将我的页面的高度body设置为100％，以便在我的内容包装上使用最小高度属性。但是，尝试将背景图像与height:100%结合使用会导致图像在滚动页面时被切断。见图片来阐述我的意思：在上面 enter image description here 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; 
}

感谢您的想法。

编辑：

这是我需要重复的图像：

Image Repeated

这里是一个小提琴：

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

来源

2013-03-04 Nick B

是否有您要附加与CSS-伪选择'后台具体原因：after'？这在许多较旧的浏览器上不起作用。另外我想知道为什么它被绝对定位。我只是简单地将background-img放在body标签中，甚至放在页面上的第一个容器div上。 – Philzen 2013-03-04 05:35:39

我不在乎旧的浏览器。我在'后面'使用'因为这是你可以在不影响子元素的情况下对'html'元素使用不透明度。请参阅：http://css-tricks.com/snippets/css/transparent-background-images/ – 2013-03-04 05:42:26

试试这个

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

来源

2013-03-04 05:36:37 jhunlio

我认为图像已经从问题文本的内容中重复出现。 – Philzen 2013-03-04 05:38:48

是的，真@Philzen。这不是我的问题的解决方案。 – 2013-03-04 05:43:46

如果你想让它在你的整个页面中创建一个背景图片，只需简单地在body中添加'body {body} {url（'http://www.example.com/img/background.png'）; background-repeat：repeat; }' – jhunlio 2013-03-04 05:48:41

现在使用到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

来源

2013-03-04 05:41:08

这不起作用。看到上面的提琴帮助任何想法。谢谢！ – 2013-03-04 06:16:36

你可以达到你想要的结果通过给予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; 
}

来源

2013-03-04 05:42:24

这不起作用。因为图像很小且重复。看到上面的小提琴。谢谢！ – 2013-03-04 06:15:09

100％身高的背景图片：需要填写页面

回答

相关问题