Comment utiliser une image de fond 100% CSS avec un contenu défilant?

Je veux créer un site avec une image de fond qui remplit toujours l'ensemble de la fenêtre, même si le contenu peut faire défiler l'écran verticalement.

J'ai créé cette JSFiddle avec background-size:cover à l'échelle de l'image de fond d'écran de la fenêtre.

Il fonctionne, tant que les divs à l'intérieur sont plus petite que la fenêtre.
Si vous faites défiler verticalement, l'image de fond n'est pas le remplissage de la page, et de plus, montre un blanc/gris de la zone de la place.

Donc ma question est: comment puis-je combiner un 100% de l'image de fond avec le défilement de contenu?
C'est mon 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;
}

Et 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>

source d'informationauteur Kokodoko | 2013-10-14

  1. 15

    Utilisation background-attachment: fixed;

    Démo

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

    Aussi, je n'ai pas encore eu pourquoi vous utilisez position: absolute; sur l'emballage élément, généralement, vous devriez être en utilisant position: relative;

  2. 5

    Ajouter à votre CSS:

    background-attachment: fixed;
  3. 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;
    }