Cours CSS / Couleurs et images de fond : cover, contain et répétition

CSS

Date de création 2026-11-06 Dernière modification 2026-11-06

Les arrière-plans CSS peuvent remplir un élément avec une couleur ou une image tout en laissant le contenu HTML inchangé. background-size: cover remplit la zone et peut recadrer l'image ; contain affiche toute l'image et peut laisser de l'espace inutilisé.

Comprendre les couleurs et images de fond

La couleur de fond est visible là où il n'y a pas d'image et derrière les zones transparentes. La couleur de fond peut rester même lorsque l'image n'est pas chargée. L'image de fond elle-même n'est pas le contenu de l'élément et ne crée pas automatiquement la hauteur de l'élément. Si vous mettez simplement l'URL de l'image dans une div vide et ne spécifiez pas de hauteur, il se peut qu'il n'y ait aucune zone à afficher. Lors de l'affichage de photos significatives en tant que contenu HTML, comparez avec l'exemple utilisant Images et vidéos adaptatives : aspect-ratio et object-fit.

.sample {
  height: 300px;
  background-color: #e8e8e8;
  background-image: url("images/landscape.webp");
}

Si l'image elle-même transmet des informations, comme une photo ou un diagramme explicatif dans le texte, il est approprié d'utiliser la balise HTML img et le texte alternatif. Vous ne pouvez pas attacher directement l'attribut alt à un arrière-plan CSS. Dans la zone d'exercice à compléter de cette leçon, vous mettrez un nom d'accessibilité qui décrit les résultats de la comparaison, mais vous n'avez pas besoin d'ajouter un rôle à chaque fois que vous utilisez l'arrière-plan décoratif dans un service réel. Ne mettez pas de descriptions importantes uniquement dans l'image de fond.

Préparez l'image et le dossier d'exemple

Ouvrez l'image de fond d'exercice 600×400 ci-dessous et enregistrez-la sous le nom landscape.webp. Utilisez les arbres à gauche et à droite ainsi que le cercle central comme objets de comparaison. Placez l'image au ratio 3:2 dans un cadre carré pour qu'il soit facile de voir où les parties sont recadrées.

background-practice/
  backgrounds.html
  images/
    landscape.webp

Parce que l'exemple intègre son CSS dans backgrounds.html, images/landscape.webp est résolu à partir de ce document HTML. Si vous déplacez les styles dans css/style.css, utilisez ../images/landscape.webp pour la même image. Les URLs relatives dans le CSS externe sont résolues à partir de la feuille de style. Vérifiez également la casse des noms de fichiers et les extensions. Pour plus de détails, voir la documentation MDN de background-image et des chemins d’image . Voir Appliquer le CSS avec des styles en ligne, internes et externes.

Comparer cover et contain

valeur	rapport image	Résultat de la mise d’une image de 600×400 dans une boîte de 300×300
cover	maintenir	Zoom avant/arrière à 450×300 et coupe de 75px sur les côtés gauche et droit.
contain	maintenir	Réduire à 300×200, laissant 50px en haut et en bas.
100% 100%	Les proportions originales peuvent varier	Un cercle peut être transformé en ovale en le réglant sur 300×300.

Ces dimensions supposent une zone de fond de 300 × 300, un positionnement centré, pas de répétition et sans bordure ni marge intérieure. cover remplit la zone en coupant une partie de l'image ; contain conserve l'image entière et expose la couleur de fond dans l'espace inutilisé. Lorsque l'image et la zone ont le même ratio, les deux résultats peuvent sembler identiques. Voir MDN : taille du fond.

La comparaison schématique utilise un format paysage 3:2 pour illustrer les deux calculs de taille. Avec cover, les côtés sont rognés. Avec contain, l'image entière reste visible et le fond gris apparaît au-dessus et en dessous. L'exemple complet permet de comparer ces effets avec l'image pratique fournie.

Si vous comparez cover·contain avec juste un dégradé CSS qui n'a pas de taille et de ratio spécifiques, la différence sera presque invisible car il remplit la même zone. Pour pratiquer le recadrage, utilisez un fichier image avec une taille et un ratio fixes comme maintenant.

Contrôler la répétition et la position

.repeat {
  background-size: 100px auto;
  background-repeat: repeat;
  background-position: left top;
}

.no-repeat {
  background-size: 100px auto;
  background-repeat: no-repeat;
  background-position: left top;
}

background-size: 100px auto définit la largeur à 100px et la hauteur pour correspondre au ratio original. repeat remplit la zone de fond avec une petite image de manière répétée, no-repeat l'affiche une seule fois. En raison de la répétition de base, l'image peut être répétée même dans l'espace vide de contain, donc spécifiez no-repeat lors de la comparaison d'une image entière.

background-position définit les critères pour placer des images. La valeur center répartit l'espace restant ou la portion découpée de chaque côté, et left top l'aligne en fonction du coin supérieur gauche. Si vous changez la position avec cover, la taille ne change pas, mais le côté qui est découpé change. L'exemple utilise des propriétés séparées, alors faites attention à ne pas réinitialiser d'autres paramètres plus tard en ajoutant la propriété abrégée background.

Exécutez l'exemple complet de fond

Enregistrez le code ci-dessous en UTF-8 dans backgrounds.html dans le dossier préparé précédemment et ouvrez-le. Utilisez la même image dans quatre cases pour comparer la taille et la répétition. Si la fenêtre est étroite, la largeur de la case sera réduite et la hauteur restera à 300px, donc la taille du découpage et de l'espace vide sera également recalculée.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing background image sizes</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 24px; color: #333; font: 1rem/1.7 sans-serif; }
    .sample { width: 100%; max-width: 300px; height: 300px; margin-block-end: 24px;
      background-color: #e8e8e8; background-image: url("images/landscape.webp");
      background-position: center; background-repeat: no-repeat; }
    .cover { background-size: cover; }
    .contain { background-size: contain; }
    .repeat { background-size: 100px auto; background-repeat: repeat; background-position: left top; }
    .no-repeat { background-size: 100px auto; background-position: left top; }
  </style>
</head>
<body>
  <h1>Comparing background images</h1>
  <h2>cover：Fill the box</h2><div class="sample cover" role="img" aria-label="Background with left and right sides cut out"></div>
  <h2>contain：Contains the entire picture</h2><div class="sample contain" role="img" aria-label="Background with empty space above and below"></div>
  <h2>repeat: small repetition</h2><div class="sample repeat" role="img" aria-label="Background with repeated small pictures"></div>
  <h2>no-repeat：Show small once</h2><div class="sample no-repeat" role="img" aria-label="Background with only one page displayed in the upper left corner"></div>
</body>
</html>

Changez une propriété à la fois

Assurez-vous dans les Outils de développement que la fenêtre est suffisamment large pour que les deux premières boîtes soient de 300×300. Comparez les parties gauche et droite de cover ainsi que l'espace en haut et en bas de contain.
Changez uniquement la position du fond de cover en left top. Après vous être assuré que plus d'arbres à gauche sont visibles et que plus d'arbres à droite sont coupés, rétablissez center.
Changez background-repeat dans contain en repeat. Vérifiez si une partie de l'image se répète dans l'espace vide et revenez à no-repeat.
Changez la taille de .no-repeat de 100px auto à 100% 100%. Vérifiez si les proportions du cercle central changent et remettez-les à leurs valeurs originales.

Diagnostiquer les images manquantes et le recadrage inattendu

Ouvrez directement le lien de l'image d'exercice pour vous assurer que le fichier original est visible. Vérifiez le nom de fichier enregistré et l'extension réelle, et calculez le chemin en fonction de l'emplacement HTML/CSS.
Inspectez la requête de l'image dans le panneau Réseau des DevTools. Une réponse 404 nécessite de vérifier le chemin. Si la réponse réussit mais que l'image est invisible, inspectez les dimensions de la boîte et la déclaration de background-image appliquée.
Si vous voulez qu'elle soit remplie sans espace vide, vérifiez si background-size vaut cover. Pour montrer toute l'image, spécifiez contain et no-repeat ensemble. Si la figure s'adapte de la même façon que la boîte, la différence entre les deux valeurs sera faible.
Si vous ajoutez un arrière-plan derrière votre texte, assurez-vous que le texte est lisible à la fois dans les zones claires et sombres. Comme le but de cette leçon est de comparer des images, le texte explicatif est placé à l'extérieur du cadre.

Avant d'étirer de force l'image de fond, décidez s'il s'agit d'une image qu'il faut voir dans son ensemble ou d'une décoration pouvant être découpée. Les images qui doivent être vues en entier, comme les photos de produits ou les schémas explicatifs, et les arrière-plans décoratifs ne doivent pas être traités selon le même standard.

CSS