Question

我想创建一个带有背景图片的网站，该网站总是填满整个窗口，即使内容可以垂直滚动。

我使用background-size：cover创建this JSFiddle以将背景图像缩放到窗口。

只要内部的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>

Answer 1

使用background-attachment: fixed;

Demo

html { 
    height: 100%;
    margin:0px;
    background: url(http://www.freegreatpicture.com/files/147/18380-hd-color-background-wallpaper.jpg) no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
}

另外，我不知道你在包装元素上使用position: absolute;的原因，通常你应该使用position: relative;

Answer 2

添加到您的CSS：

background-attachment: fixed;

Answer 3

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

如何使用滚动内容的100％CSS背景图像？

3 个答案: