Maîtrise de background-size et adaptation d'images en CSS

1. Propriété background-size : contrôler les dimensions d'une image de fond

La propriété background-size permet de définir la taille d'une image utilisée comme arrière-plan. Elle est supportée par IE9+, Firefox 4+, Opera, Chrome, Safari 5+.

background-size: length | percentage | cover | contain;
  • length : définit la largeur et la hauteur (ex. 200px 150px). Si une seule valeur est fournie, la seconde devient auto.
  • percentage : valeurs relatives à la largeur et hauteur du conteneur parent. Une seule valeur = l'autre reste auto.
  • cover : agrandit l'image jusqu'à ce qu'elle recouvre entièrement la zone de fond (sans déformation). L'image peut être rognée si les proportions diffèrent.
  • contain : agrandit l'image jusqu'à ce qu'un côté touche le bord du conteneur (sans déformation). L'image reste entièrement visible.

Comprendre les différences entre cover et contain :

  • Les deux respectent le ratio de l'image.
  • Cover : l'image grandit jusqu'à couvrir toute la surface, quitte à être coupée.
  • Contain : l'image grandit jusqu'à ce qu'un bord atteigne le conteneur. Si la largeur arrive en premier, cela équivaut à background-size: 100% auto.

Note : L'élément parent doit avoir une hauteur définie (fixe ou responsive) pour que background-size fonctionne correctement.

2. Adaptation d'une image avec balise <img> (largeur 100%)

Pour un bandeau large (ex. 100% de la fenêtre) sans déformation ni recadrage, on préfère une balise <img> avec une largeur à 100%. La hauteur s'adapte automatiquement.


<html>
<head>
  <meta charset="utf-8">
  <title>Image responsive avec img</title>
  <style>
    .wrapper {
      width: 100%;
    }
    .responsive-img {
      width: 100%;
      height: auto;
      display: block;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <img class="responsive-img" src="https://via.placeholder.com/1600x500" alt="Bannière">
  </div>
</body>
</html>

3. Image de fond responsive (technique du padding-top)

Pour utiliser une image de fond tout en conservant un ratio d'affichage variable, on peut exploiter la propriété padding-top avec un pourcentage. Le principe : le padding en pourecntage se base sur la largeur du conteneur.

Calcul du padding : padding-top = (hauteur image / largeur image) × 100%.


<html>
<head>
  <meta charset="utf-8">
  <title>Image de fond responsive</title>
  <style>
    .container {
      width: 100%;
    }
    .bg-holder {
      padding-top: 31.25%; /* Pour une image de 1600x500 → (500/1600)*100 */
      background: url("https://via.placeholder.com/1600x500") no-repeat center;
      background-size: cover;
      /* background-position: center;  déjà inclus dans la ligne précédente */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="bg-holder"></div>
  </div>
</body>
</html>

Cette méthode permet d'obtenir un fond qui s'adapte à la largeur de l'écran tout en gardant le ratio de l'image d'origine, sans déformation.

Étiquettes: CSS background-size cover contain image responsives

Publié le 7 août à 17h22

Étiquettes Populaires

©2026 L'Atelier Monstre