Un <div> tout neuf n'a aucune couleur de fond : il est parfaitement transparent, et laisse voir ce qu'il y a derrière lui. C'est background-color qui décide, ou non, de peindre cette surface.
Cette propriété paraît d'une simplicité totale, mais deux détails surprennent régulièrement : jusqu'où exactement la couleur s'étend à l'intérieur de l'élément, et la confusion fréquente avec color, qui ne fait pas du tout la même chose.
Définition
background-color applique une Couleur CSS unie sur la couche de fond d'un élément, derrière son contenu. Elle accepte n'importe quel format de couleur, y compris une valeur avec canal alpha pour un fond semi-transparent. Sa valeur par défaut est transparent : sans déclaration explicite, un élément ne peint rien du tout, et le fond de son parent reste visible à travers lui.
.encart {
background-color: transparent; /* valeur par défaut, inutile à écrire */
}
.encart--actif {
background-color: #eef2ff;
}Jusqu'où la couleur s'étend
background-color colore le contenu et le padding de l'élément, jusqu'au bord extérieur de sa bordure. La margin, en revanche, n'est jamais colorée : elle se situe hors de la boîte au sens du modèle de boîte, et laisse toujours transparaître ce qui est derrière l'élément, quelle que soit la couleur de fond déclarée.
| Zone de la boîte | Reçoit background-color |
|---|---|
| Contenu | Oui |
| Padding | Oui |
| Bordure | Zone couverte, mais souvent masquée par la couleur propre de la bordure |
| Marge | Non, toujours transparente |
background-color déclaré ne se voit jamais à l'écran : c'est un piège fréquent en débogage. Ajoutez temporairement un fond coloré ou une bordure pour visualiser exactement où commence et où finit la boîte d'un élément.background-color n'est pas color
La confusion revient souvent chez les débutants : color règle la couleur du texte et des éléments qui en héritent, comme un contour de saisie, alors que background-color règle la couleur de la surface derrière ce texte. Sur un bouton, les deux travaillent ensemble : background-color donne la couleur du bouton, color donne la couleur de son libellé, et il faut vérifier que les deux restent lisibles l'une sur l'autre.
.bouton {
background-color: #4f46e5;
color: white; /* pas background-color: white */
}background-color comme repli sous une image
Quand un élément déclare à la fois background-color et background-image, la couleur reste visible en dessous de l'image : dans les zones qu'elle ne couvre pas, ou pendant le court instant où elle est encore en train de se charger. Sur une image légèrement transparente au format PNG, la couleur de fond transparaît aussi à travers les pixels non opaques, ce qui en fait un vrai filet de sécurité visuel plutôt qu'un simple doublon inutile. Prévoir systématiquement une couleur de repli proche de la teinte dominante de l'image évite un flash de fond blanc ou gris disgracieux pendant le chargement d'une photo de couverture, en particulier sur une connexion lente.
Questions fréquentes
background-color sur l'élément html ?Vérifiez l'élément body : s'il possède lui-même une background-color, même transparente par omission d'une règle plus spécifique, il peut recouvrir entièrement html. Sur une page, c'est généralement body qui reçoit le fond principal, html servant surtout de filet de sécurité pour les zones de défilement au-delà du contenu.
background-color ?Oui, background-color se prête très bien à une transition, contrairement à des propriétés qui changent le flux de la page. Un survol de bouton qui passe d'un bleu à un bleu plus foncé en est l'exemple le plus courant, et ne demande qu'une ligne de transition en plus de la déclaration de couleur elle-même.
Le padding la prend aussi, ce qui surprend souvent en débogage. Un texte qui semble collé au bord d'un encart coloré alors que du padding est bien déclaré indique presque toujours une autre erreur, comme un box-sizing mal réglé ou une largeur fixe trop contrainte, plutôt qu'un problème de couleur de fond.