Docs CSS exécutables : Image de fond

Q: Comment ajouter une image de fond en CSS ?

Utilisez background-image: url("photo.jpg"); sur l'élément. Le chemin est relatif au fichier CSS (ou à la page, pour un attribut style ou un élément ). Donnez une taille à l'élément, car un fond ne fait jamais grandir un élément vide.

Q: Comment faire couvrir tout l'élément par une image de fond ?

Utilisez background-size: cover; avec background-position: center;. L'image s'agrandit pour remplir entièrement la boîte en gardant ses proportions, et ce qui dépasse est rogné.

Q: Quelle est la différence entre cover et contain ?

cover remplit toute la boîte et rogne ce qui ne tient pas. contain montre l'image entière et laisse un espace vide sur deux côtés quand les proportions diffèrent.

Q: Comment empêcher une image de fond de se répéter ?

Ajoutez background-repeat: no-repeat;. Par défaut, une image de fond se répète en mosaïque dans les deux directions pour remplir l'élément.

Q: Pourquoi mon image de fond ne s'affiche-t-elle pas ?

Les causes habituelles sont un mauvais chemin dans url() (il est relatif au fichier CSS), un élément sans hauteur parce qu'il n'a pas de contenu, ou un raccourci background placé plus loin qui a réinitialisé l'image.

Comment ajouter une image de fond

background-image peint une image derrière le contenu, le padding et la bordure de l'élément. Par défaut, elle commence au coin supérieur gauche de la boîte de padding, garde sa taille naturelle et se répète pour remplir la boîte :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background image</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .dots {
      /* a 24x24 image: one blue dot */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%232563eb'/%3E%3C/svg%3E");
      height: 120px;
      padding: 16px;
      border: 2px solid #111827;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <div class="dots">One 24px image, repeated to fill the box</div>
</body>
</html>

Dans un vrai projet, url() pointe vers un fichier : url("images/hero.jpg"). Le chemin est relatif à la feuille de style qui le contient (ou à la page, pour un élément <style>). Les exemples de cette page utilisent de petites images SVG écrites en ligne sous forme d'URL data:, pour fonctionner partout.

Deux choses à savoir dès le départ :

Un fond ne donne pas de taille à un élément. Une div vide avec une image de fond fait 0px de haut. Donnez-lui du contenu, du padding, une height ou un aspect-ratio.
Une image de fond est une décoration. Les lecteurs d'écran l'ignorent et elle n'a pas de texte alternatif. Une image porteuse de sens a sa place dans un élément <img>.

background-size : cover, contain et longueurs

background-size redimensionne l'image. Les deux mots-clés gardent ses proportions :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>cover vs contain</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box {
      --landscape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200'%3E%3Crect width='400' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='320' cy='50' r='24' fill='%23f59e0b'/%3E%3Cpath d='M0 200L120 70L220 200Z' fill='%2316a34a'/%3E%3Cpath d='M140 200L270 90L400 200Z' fill='%2315803d'/%3E%3C/svg%3E");
      width: 160px; height: 160px;
      background: var(--landscape) center / auto no-repeat, #e5e7eb;
      border: 2px solid #111827;
    }
    .cover { background-size: cover; }
    .contain { background-size: contain; }
    .stretch { background-size: 100% 100%; }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box"></div>auto (400x200, cropped)</div>
    <div><div class="box cover"></div>cover</div>
    <div><div class="box contain"></div>contain</div>
    <div><div class="box stretch"></div>100% 100% (distorted)</div>
  </div>
</body>
</html>

L'image est deux fois plus large que haute et chaque boîte est carrée.

Valeur	Résultat
`auto` (par défaut)	La taille propre de l'image
`cover`	S'agrandit jusqu'à remplir entièrement la boîte ; l'excédent est rogné
`contain`	S'agrandit jusqu'à ce que l'image entière tienne ; des bandes grises restent sur deux côtés
`200px`	200px de large, hauteur proportionnelle
`50% auto`	La moitié de la largeur de la boîte, hauteur proportionnelle
`100% 100%`	Exactement la taille de la boîte ; déforme l'image si les proportions diffèrent

cover est le choix habituel pour les bannières et les cartes. contain convient aux logos et illustrations qui ne doivent jamais être coupés.

background-position et background-repeat

background-position place l'image dans la boîte, avec des mots-clés (top, center, bottom, left, right), des pourcentages ou des longueurs. background-repeat contrôle la répétition. Essayez quelques valeurs :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Position and repeat</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box {
      height: 140px; margin-top: 10px;
      border: 2px solid #111827;
      background-color: #f3f4f6;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%232563eb'/%3E%3C/svg%3E");
      background-size: 48px;
    }
    label { display: block; margin-top: 6px; }
  </style>
</head>
<body>
  <label>background-position: <input id="pos" value="center" size="18"></label>
  <label>background-repeat: <input id="rep" value="no-repeat" size="18"></label>
  <div id="box"></div>
  <script>
    const box = document.getElementById('box');
    const pos = document.getElementById('pos');
    const rep = document.getElementById('rep');
    const show = () => {
      box.style.backgroundPosition = pos.value;
      box.style.backgroundRepeat = rep.value;
    };
    pos.addEventListener('input', show);
    rep.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Essayez les positions top right, bottom 10px right 20px et 25% 75%, et les répétitions repeat-x, repeat-y, space (des tuiles espacées pour qu'aucune ne soit coupée) et round (des tuiles redimensionnées pour qu'un nombre entier tienne).

Superposition : plusieurs fonds et un texte par-dessus

background-image accepte une liste séparée par des virgules. La première couche est dessinée au-dessus. L'usage courant est un dégradé semi-transparent sur une photo, pour qu'un texte blanc reste lisible :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Overlay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .hero {
      --landscape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200'%3E%3Crect width='400' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='320' cy='50' r='24' fill='%23f59e0b'/%3E%3Cpath d='M0 200L120 70L220 200Z' fill='%2316a34a'/%3E%3Cpath d='M140 200L270 90L400 200Z' fill='%2315803d'/%3E%3C/svg%3E");
      background-image:
        linear-gradient(rgb(17 24 39 / 10%), rgb(17 24 39 / 75%)),
        var(--landscape);
      background-size: cover;
      background-position: center;
      aspect-ratio: 16 / 7;
      display: flex; align-items: end;
      padding: 20px; box-sizing: border-box;
      color: white;
    }
    h1 { margin: 0; font-size: 32px; }
  </style>
</head>
<body>
  <div class="hero" id="hero"><h1>Readable over an image</h1></div>
</body>
</html>

aspect-ratio donne une hauteur à la boîte vide, et background-size: cover s'applique aux deux couches. Pour d'autres recettes de dégradés, voir les dégradés CSS.

Le raccourci background

background définit toutes les propriétés de fond en une ligne. La taille doit venir juste après la position, séparée par une barre oblique, et la couleur se place dans la dernière couche :

.hero {
  background: url("hero.jpg") center / cover no-repeat, #1f2937;
}
/* the same as */
.hero {
  background-image: url("hero.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #1f2937;
}

La couleur de secours s'affiche pendant le chargement de l'image, et si celui-ci échoue. Toute propriété omise dans le raccourci revient à sa valeur par défaut : placez donc le raccourci en premier et les propriétés individuelles après.

Autres propriétés de fond

Propriété	Rôle
`background-attachment: fixed`	L'image reste en place pendant le défilement de la page (ignoré sur Safari iOS)
`background-origin`	Si la position part du bord de la bordure, du padding ou du contenu
`background-clip`	Où le fond est peint, y compris `text` pour remplir les lettres
`background-blend-mode`	Fusionne les couches entre elles, comme `multiply`

Erreurs courantes

Un mauvais chemin. url() dans une feuille de style est relatif au fichier CSS, pas à la page HTML.
Un élément vide. Il n'a pas de hauteur, et l'image n'a nulle part où s'afficher.
Oublier no-repeat avec contain ou une petite image : elle se répète.
Étirer avec 100% 100% alors que vous vouliez cover.
Des images importantes en fond. Utilisez <img> avec un texte alternatif pour le contenu ; les fonds sont invisibles pour les lecteurs d'écran.
Oublier les guillemets autour d'une URL data: qui contient des espaces ou des guillemets. Écrivez toujours url("...").

Questions fréquentes

Comment ajouter une image de fond en CSS ?

Utilisez background-image: url("photo.jpg"); sur l'élément. Le chemin est relatif au fichier CSS (ou à la page, pour un attribut style ou un élément <style>). Donnez une taille à l'élément, car un fond ne fait jamais grandir un élément vide.

Comment faire couvrir tout l'élément par une image de fond ?

Utilisez background-size: cover; avec background-position: center;. L'image s'agrandit pour remplir entièrement la boîte en gardant ses proportions, et ce qui dépasse est rogné.

Quelle est la différence entre cover et contain ?

cover remplit toute la boîte et rogne ce qui ne tient pas. contain montre l'image entière et laisse un espace vide sur deux côtés quand les proportions diffèrent.

Comment empêcher une image de fond de se répéter ?

Ajoutez background-repeat: no-repeat;. Par défaut, une image de fond se répète en mosaïque dans les deux directions pour remplir l'élément.

Pourquoi mon image de fond ne s'affiche-t-elle pas ?

Les causes habituelles sont un mauvais chemin dans url() (il est relatif au fichier CSS), un élément sans hauteur parce qu'il n'a pas de contenu, ou un raccourci background placé plus loin qui a réinitialisé l'image.

Concepts liés