background-image en CSS : image, dégradé, ou plusieurs images empilées

Une photo de héros en fond de section, une texture discrète derrière un formulaire, un motif répété sur un footer : dans tous ces cas, l'image n'a rien à raconter par elle-même, elle sert uniquement de décor. C'est exactement le rôle de background-image.

Contrairement à une balise <img>, une image posée avec cette propriété ne fait pas partie du contenu de la page : elle ne pousse jamais la taille de l'élément, et elle n'a pas de texte alternatif, puisqu'elle n'est pas censée porter d'information.

Définition

background-image place une image, ou un dégradé, en fond d'un élément, derrière son contenu et derrière sa background-color éventuelle. Sa valeur par défaut est none : sans déclaration, aucune image ne s'affiche. La syntaxe la plus courante utilise url() avec le chemin du fichier.

.hero {
  background-image: url("/images/paysage.jpg");
  background-size: cover;
}

Une image, ou un dégradé

background-image n'accepte pas uniquement des fichiers image : un Dégradé CSS est aussi une valeur valide pour cette propriété. Il n'existe pas de propriété séparée réservée aux dégradés : linear-gradient() et radial-gradient() se déclarent exactement au même endroit qu'un url().

.carte-degrade {
  background-image: linear-gradient(135deg, #6366f1, #ec4899);
}

Plusieurs images superposées

background-image accepte une liste de valeurs séparées par des virgules, et les superpose dans l'ordre où elles sont écrites : la première déclarée s'affiche au-dessus, la dernière en dessous. C'est la technique la plus courante pour poser un voile sombre en dégradé sur une photo, sans toucher au fichier image lui-même.

.hero-lisible {
  background-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent),
    url("/images/paysage.jpg");
  background-size: cover;
}

background-image ou <img> ?

La question se pose dès qu'une image apparaît dans une maquette. Si elle porte une information que l'utilisateur doit comprendre, comme une photo de profil ou l'illustration d'un article, elle appartient au contenu et doit passer par <img>, avec un texte alternatif. Si elle est purement décorative, comme une texture de fond ou un motif répété, background-image est le bon outil : elle disparaît proprement pour les lecteurs d'écran, ce qui est le comportement souhaité pour un simple décor. Sur une image de contenu affichée en couverture, comparez aussi avec object-fit, l'équivalent de background-size pensé pour <img> et <video>.

Optimiser le poids d'une image de fond

Une image de fond volumineuse ralentit le premier affichage de la page, souvent davantage qu'un fichier de poids équivalent chargé en tant que <img>, car le navigateur ne peut lui appliquer ni chargement différé natif ni attribut de priorité. Compresser l'image, la servir dans un format récent comme WebP ou AVIF, et limiter sa résolution à ce qui est réellement affiché à l'écran restent les leviers les plus efficaces. Sur une section plein écran, une image de fond mal optimisée peut à elle seule doubler le temps de chargement perçu de toute la page, bien avant que le reste du contenu n'entre en jeu.

Questions fréquentes

La cause la plus fréquente est un chemin mal résolu : dans un fichier CSS, url() est relatif à l'emplacement du fichier CSS lui-même, pas à celui de la page HTML qui l'utilise. Un chemin absolu commençant par une barre oblique, comme /images/paysage.jpg, évite ce piège dans la grande majorité des projets.

Pas avec une transition classique : le navigateur ne sait pas interpoler progressivement entre deux images. On simule l'effet en superposant deux calques avec opacity, ou en changeant la propriété d'un coup, sans transition douce entre les deux visuels.

Non, c'est justement le cas où <img> s'impose : cette photo porte une information (qui est cette personne), elle doit rester accessible avec un texte alternatif, et elle mérite d'apparaître même si les feuilles de style ne se chargent pas correctement.