Comment forcer l'arrière-plan HTML vers le bas lorsque la page est plus petite que la fenêtre

Question

J'ai une page avec 2 images d'arrière-plan, l'une d'entre elles doit apparaître en bas de la page. À l'heure actuelle, je l'ai mis en œuvre comme ceci:

body { 
    background-image: url('/cheri/image/background.png'), 
         url('/cheri/image/backgroundB.png'); 
    background-position: top, bottom; 
    background-repeat: repeat-x, repeat-x; 
} 

Cela fonctionne bien lorsque le contenu de la page est supérieure à la fenêtre du navigateur, mais si elle est plus petit un espace blanc vide est laissé sous l'image d'arrière-plan, comme dans cette image:

http://img198.imageshack.us/img198/4560/screenshot20120916at851.png

J'ai essayé de mettre le corps en position: absolute, hauteur: 100%, mais il n'a pas rendu correctement lors du défilement était présent. J'ai également essayé de créer une div séparée pour l'image d'arrière-plan et de la positionner en bas, mais comme j'ai des propriétés de position différentes pour certains éléments qui se trouvent en bas, l'indexation z ne fonctionnait pas correctement.

Merci pour toute aide!

Answer 1

Utilisez min-height: 100% sur les deux html et body:

html, body { min-height: 100%; } 

DEMO

Il ne crée pas de problèmes lorsque vous avez assez de contenu pour faire défiler .

DEMO

Answer 2

Définir l'élément HTML ainsi:

html { 
    background-image: url('/cheri/image/background.png'), url('/cheri/image/backgroundB.png'); 
    background-position: top, bottom; 
    background-repeat: repeat-x, repeat-x; 
}