HTML - Pourquoi le fond d'écran appliqué à l'élément body s'étend à toute la fenêtre ?
La règle est simple
L'arrière-plan appliqué à l'élément racine du document s'applique à toute la surface sur laquelle le document est affiché (canvas).
Cela signifie que si la taille de l'élément <body> est inférieure à celle de la fenêtre, l'arrière-plan s'applique tout de même à toute la fenêtre.
Cette règle CSS déclare une hauteur de 0 pixel et la couleur rouge en arrière-plan pour l'élement <body> :
body {height:0;background-color:red;}Malgré une hauteur forcée à 0, l'arrière-plan de la fenêtre du navigateur sera entièrement rouge.
L'élément racine : <html> ou <body> ?
Techniquement parlant, l'élément racine d'un document HTML est l'élément <html>. D'ailleurs, si on applique un arrière-plan sur cet élément, toute la fenêtre est impactée conformément à la règle énoncée plus haut.
html {background-color:red;}
body {background-color:transparent;}Cependant, la recommandation du W3C est d'utiliser l'élément <body> pour appliquer un arrière plan à un document HTML.