15

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

我使用 background-size:cover 创建了这个 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>
4

3 回答 3

23

利用background-attachment: fixed;

演示

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;

于 2013-10-14T15:43:57.223 回答
5

添加到您的 CSS：

background-attachment: fixed;
于 2013-10-14T15:46:44.000 回答
2 
    #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;
    }
于 2013-10-14T15:44:51.007 回答