Écrire background-color, background-image, background-position, background-size et background-repeat sur cinq lignes séparées fonctionne très bien, mais devient vite lourd à relire. Le raccourci background regroupe tout cela en une seule déclaration.
Cette compacité a un prix : un shorthand mal maîtrisé écrase silencieusement des réglages qu'on croyait acquis, et l'ordre des valeurs à l'intérieur n'est pas toujours libre.
Définition
background est le raccourci qui combine background-color, background-image, background-position, background-size, background-repeat, background-attachment, background-origin et background-clip en une seule propriété. Toute sous-propriété non mentionnée dans le raccourci reprend sa valeur initiale, même si elle avait été définie ailleurs juste avant.
.hero {
background: #0f172a url("/images/hero.jpg") center / cover no-repeat;
}
/* équivalent en écriture longue */
.hero-longue {
background-color: #0f172a;
background-image: url("/images/hero.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}background plus loin dans une feuille de style, même pour changer seulement la couleur, remet à zéro toute image, position ou taille définie précédemment sur le même élément. Pour ne toucher qu'un seul réglage, utilisez la sous-propriété concernée, comme background-color seule, plutôt que le raccourci complet.background-size : cover contre contain
Ces deux mots-clés répondent à la même question, remplir un espace avec une image, mais pas de la même façon. cover agrandit l'image jusqu'à couvrir toute la surface, quitte à en rogner les bords si les proportions ne correspondent pas exactement. contain garde l'image entière visible, quitte à laisser des bandes vides sur les côtés ou en haut et en bas.
| Valeur | Comportement | Cas typique |
|---|---|---|
cover | Remplit tout l'espace, peut rogner l'image | Photo de couverture, bannière |
contain | Montre l'image entière, peut laisser des bandes vides | Logo sur fond de marque |
Position et taille : le piège de la barre oblique
Dans le raccourci, background-position et background-size s'écrivent l'une après l'autre, séparées par une barre oblique, et cet ordre précis ne se choisit pas : la position vient toujours avant la barre, la taille toujours après. Inverser les deux, ou oublier la barre en pensant que deux mots-clés suffiront à les distinguer, produit un résultat silencieusement incorrect plutôt qu'une erreur visible dans la console, ce qui rend le bogue particulièrement long à repérer lors d'une relecture rapide.
/* correct : position, puis barre, puis taille */
background: url("photo.jpg") top center / cover no-repeat;
/* incorrect : l'ordre position/taille est inversé */
background: url("photo.jpg") cover / top center no-repeat;background-attachment : un fond qui reste fixe
background-attachment: fixed ancre l'image au viewport plutôt qu'à l'élément qui la porte : le contenu défile par-dessus, l'image reste immobile, ce qui donne un effet de profondeur simple, souvent appelé effet parallaxe léger. Ce réglage se comporte cependant de façon incohérente sur certains navigateurs mobiles, où il est fréquemment ignoré pour des raisons de performance : à tester systématiquement sur un vrai téléphone avant de s'y fier plutôt que de se contenter d'un aperçu sur ordinateur.
Questions fréquentes
Très probablement parce que la modification a réécrit tout le raccourci background au lieu de la seule sous-propriété background-color. Toute valeur omise dans un raccourci CSS revient à son état initial, y compris une image posée par une règle précédente ou héritée.
cover ou contain pour une photo de profil ronde ?cover, dans la quasi-totalité des cas : une photo de profil doit remplir tout le cercle sans laisser de bandes vides, quitte à rogner légèrement les bords. contain conviendrait uniquement si le cadrage complet de l'image importait plus que le remplissage total de la forme, ce qui est rare sur ce type d'élément, par exemple object-fit pour une image du même type placée en balise <img>.
Pour la plupart des valeurs, non : le navigateur reconnaît une couleur, une image ou un mot-clé de répétition quel que soit leur ordre d'écriture. La seule paire strictement ordonnée est position et taille, séparées par une barre oblique, où la position doit toujours précéder.