100％高度的背景图像：需要填充页面 [英] Background Image with 100% height: Need to fill page

问题描述

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

I have a small .png file that repeats to form a background image. I need to set the body height of my page to 100% in order to use min-height property on my content wrapper. However, trying to use the background-image in conjunction with height:100% results in the image getting cut off when the page is scrolled. See picture to elaborate what I mean:

背景最佳

但滚动时会被切断

Background on top But when scrolling it is cut off

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

How do I get the background image to repeat over the whole page, even after the user scrolls down? Here is the 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;
}

感谢您的想法。

编辑：

这是我需要重复的图片：

This is the image i need repeated:

这是小提琴：

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

推荐答案

试试这个

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

这篇关于100％高度的背景图像：需要填充页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！