Как использовать 100% CSS background-image с прокруткой контента?

Я хочу создать сайт с фоновым изображением, которое всегда заполняет все окно, даже если содержимое может прокручиваться по вертикали.

Я создал это JSFiddle использование background-size: обложка для масштабирования фонового изображения в окне.

он работает, пока divs внутри меньше, чем окно. При прокрутке по вертикали фоновое изображение больше не заполняет страницу и вместо этого показывает белую/серую область.

Так что мой вопрос: как я могу объединить фоновое изображение 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>
10
background-image css html

3 ответов

использовать 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;

16

добавить в CSS:

background-attachment: fixed;
5
    #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;
    }
2