Propriété CSS background-image

La propriété CSS background-image définit une ou plusieurs images d'arrière-plan pour un élément. L'image peut être un fichier image réel référencé avec url(), ou une image générée par CSS telle qu'un dégradé.

Par défaut, une image d'arrière-plan est placée dans le coin supérieur gauche de l'élément et répétée (horizontalement et verticalement) pour remplir l'espace disponible. Vous contrôlez ce comportement avec les propriétés associées background-repeat, background-position, background-size et background-attachment — ou toutes à la fois avec le raccourci background.

La zone de rendu couvre le contenu de l'élément, le padding et la boîte de border, mais pas le margin. Vous pouvez modifier la boîte utilisée avec background-clip et l'origine du positionnement avec background-origin.

Quand l'utiliser

Optez pour background-image plutôt qu'une balise <img> en ligne lorsque l'image est décorative et non porteuse de contenu — arrière-plans, textures, sections hero, dégradés et icônes qui ne font pas partie du sens de la page. Comme les arrière-plans ne sont pas lus par les lecteurs d'écran, ne placez jamais ici des images porteuses d'information ; utilisez une balise <img> avec du texte alt pour celles-ci.

Quelques points importants à connaître :

Associez-le toujours à une background-color comme solution de repli. Si l'image ne parvient pas à se charger (ou est encore en cours de téléchargement), la couleur s'affiche à la place et préserve la lisibilité du texte.
Les images se superposent. Lorsque vous listez plusieurs images séparées par des virgules, la première est peinte au-dessus et chaque image suivante se place derrière elle.
Les dégradés sont aussi des images. linear-gradient() et radial-gradient() produisent des images CSS, donc elles appartiennent à background-image, pas à background-color.

Valeur initiale	none
S'applique à	Tous les éléments. S'applique aussi à ::first-letter et ::first-line.
Hérité	Non.
Animatable	Non.
Version	CSS1 + quelques nouvelles valeurs dans CSS3
Syntaxe DOM	object.style.backgroundImage = "url(img_tree.png)";

Syntaxe

Syntaxe de la propriété CSS background-image

background-image: url | none | linear-gradient | radial-gradient | repeating-linear-gradient | repeating-radial-gradient | initial | inherit;

Exemple de la propriété background-image :

Exemple de la propriété CSS background-image

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Background-image property example</h2>
    <p>Hello World!</p>
  </body>
</html>

Essayez vous-même »

Résultat

Dans l'exemple suivant, deux images sont utilisées simultanément. Elles sont superposées avec background-position et background-repeat, et background-attachment: fixed les maintient en place pendant le défilement de la page.

Exemple de la propriété background-image avec d'autres propriétés d'arrière-plan :

Exemple de la propriété CSS background-image avec 2 images

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        padding: 100px;
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-attachment: fixed;
        background-position: 5px 50px;
        background-repeat: no-repeat, repeat;
      }
    </style>
  </head>
  <body>
    <h2>Background-image property example</h2>
    <p>The background image is positioned 5px from the left, and 50px down from the top.</p>
  </body>
</html>

Essayez vous-même »

Notez les listes séparées par des virgules ci-dessus : background-repeat: no-repeat, repeat applique no-repeat à la première image et repeat à la seconde, dans le même ordre que celui dans lequel les images sont listées. Ce mappage par image est la façon dont les arrière-plans multiples sont configurés.

Dans l'exemple suivant, un linear-gradient() avec deux points de couleur est utilisé comme image d'arrière-plan pour un élément <div>. Comme un dégradé est une image, aucun url() n'est impliqué :

Exemple de la propriété background-image avec la valeur "linear-gradient" :

Exemple de la propriété CSS background-image avec la valeur linear-gradient

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        height: 300px;
        background-image: linear-gradient(#eee, #1c87c9);
      }
    </style>
  </head>
  <body>
    <h2>Linear gradient as a background image example</h2>
    <p>This linear gradient starts at the top. It starts gray, transitioning to blue:</p>
    <div></div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété background-image avec la valeur "repeating-radial-gradient" :

Exemple de la propriété CSS background-image avec la valeur repeating-radial-gradient

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      div {
        height: 300px;
        background-color: #cccccc;
        background-image: repeating-radial-gradient(#8ebf42, #eee 15%, #ccc 30%);
      }
    </style>
  </head>
  <body>
    <h2>Radial gradient as a background image example</h2>
    <div></div>
  </body>
</html>

Essayez vous-même »

Pièges courants

L'image est invisible car l'élément n'a pas de hauteur. Un arrière-plan a besoin d'une boîte sur laquelle se peindre. Une <div> vide se réduit à zéro hauteur, alors donnez-lui une height explicite (comme dans les exemples de dégradé) ou du contenu.
Une 404 sur l'arrière-plan échoue silencieusement. Contrairement à <img>, un url() cassé ne produit ni erreur ni icône brisée — la zone reste simplement vide (ou affiche la background-color). Vérifiez bien le chemin si rien n'apparaît.
Utilisez background-color, pas background-image, pour une couleur unie. Les dégradés vont dans background-image ; les couleurs plates appartiennent à background-color.
Le pavage s'affiche mal ? Ajoutez background-repeat: no-repeat et dimensionnez l'image avec background-size (par exemple cover pour remplir la boîte).

Valeurs

Valeur	Description
url	Définit l'URL de l'image. Plusieurs images peuvent être spécifiées, séparées par des virgules.
none	Aucune image d'arrière-plan ne sera affichée. C'est la valeur par défaut.
linear-gradient	Un dégradé linéaire est spécifié comme image d'arrière-plan.
radial-gradient	Un dégradé radial est spécifié comme image d'arrière-plan.
repeating-linear-gradient	Répète un dégradé linéaire.
repeating-radial-gradient	Répète un dégradé radial.
initial	Définit la propriété à sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Pratique

Quelles sont les propriétés CSS permettant de contrôler l'image d'arrière-plan d'un élément ?

background-imagebackground-colorbackground-sizebackground-positiontext-color