Html 如何使用100%CSS背景图像和滚动内容？_Html_Css_Background Image

Html 如何使用100%CSS背景图像和滚动内容？

html css

Html 如何使用100%CSS背景图像和滚动内容？,html,css,background-image,Html,Css,Background Image,我想创建一个带有背景图像的站点，即使内容可以垂直滚动，它也会始终填充整个窗口我使用background size:cover将背景图像缩放到窗口只要里面的div比窗口小，它就可以工作。如果垂直滚动，背景图像将不再填充页面，而是显示白色/灰色区域所以我的问题是：如何将100%的背景图像与滚动内容结合起来？这是我的CSS： html { height: 100%; margin:0px; background-color:#999999; backgroun

我想创建一个带有背景图像的站点，即使内容可以垂直滚动，它也会始终填充整个窗口

我使用background size:cover将背景图像缩放到窗口

只要里面的div比窗口小，它就可以工作。如果垂直滚动，背景图像将不再填充页面，而是显示白色/灰色区域

所以我的问题是：如何将100%的背景图像与滚动内容结合起来？这是我的CSS：

html {
    height: 100%;
    margin:0px;
    background-color:#999999;
    background-image: url(http://s22.postimg.org/e03w9stjl/main_bg.png);
    background-position:center;
    background-repeat:no-repeat;
    background-size: cover;
}
body {
    min-height: 100%;
    margin:0px;
}
#appcontainer {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.7);
    width:560px; height:2220px;
    left:20px; top:20px;
}

和HTML：

<!DOCTYPE html>
<html>
<head></head>
<body>

    <div id="appcontainer">
        This div causes the background image to stop scaling to the page.
    </div>  

</body>
</html>


此div导致背景图像停止缩放到页面。

使用

后台附件：固定


另外，我不明白为什么要使用position:absoluteposition:relative
添加到CSS中：
    #appcontainer {
        position: absolute;
        background-color: rgba(255, 255, 255, 0.7);
        background: url(images/bg.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        top: 0;
        right 0;
        left: 0;
        bottom 0;
    }

background-attachment: fixed;

谢谢，它现在起作用了：）为什么要用相对而不是绝对？@PietBinnenbocht这是一个很详细的定位概念，读一些文章，你就会明白我的意思，为什么不使用绝对，因为你正在做的事情似乎不需要使用绝对：）
background-attachment: fixed;