background-size

Exemple interactif

background-size: contain;

background-size: contain;
background-repeat: no-repeat;

background-size: cover;

background-size: 30%;

background-size: 200px 100px;

<section id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#example-element {
  background-image: url("/shared-assets/images/examples/hand.jpg");
  min-width: 100%;
  min-height: 100%;
}

Syntaxe

/* Valeurs avec un mot-clé */
background-size: cover;
background-size: contain;

/* Une seule valeur */
/* La largeur de l'image (la hauteur vaut 'auto') */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;

/* Deux valeurs */
/* Première valeur : la largeur / Seconde valeur : la hauteur  */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

/* Valeurs pour plusieurs arrière-plans */
background-size: auto, auto; /* À ne pas confondre avec `auto auto` */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

/* Valeurs globales */
background-size: inherit;
background-size: initial;
background-size: revert;
background-size: revert-layer;
background-size: unset;

La propriété background-size peut être définie de différentes façons :

• En utilisant les valeurs de mot-clé contain ou cover.
• En utilisant uniquement une valeur de largeur, auquel cas la hauteur vaut auto par défaut.
• En utilisant à la fois une valeur de largeur et une valeur de hauteur, auquel cas la première définit la largeur et la seconde définit la hauteur. Chaque valeur peut être une <length>, une <percentage>, ou auto.

Pour définir la taille de plusieurs images d'arrière-plan, séparez la valeur de chacune par une virgule.

Valeurs

contain

Redimensionne l'image pour qu'elle soit aussi grande que possible dans son conteneur sans rogner ni déformer l'image. Si le conteneur est plus grand que l'image, cela provoque un pavage de l'image, sauf si la propriété background-repeat vaut no-repeat.

cover

Redimensionne l'image (en conservant ses proportions) à la plus petite taille possible pour remplir le conteneur (c'est-à-dire : sa hauteur et sa largeur recouvrent entièrement le conteneur), sans laisser d'espace vide. Si les proportions de l'arrière-plan diffèrent de celles de l'élément, l'image est rognée verticalement ou horizontalement.

auto

Redimensionne l'image d'arrière-plan dans la direction concernée de façon à conserver ses proportions intrinsèques.

<length>

Étire l'image dans la dimension concernée à la longueur indiquée. Les valeurs négatives ne sont pas autorisées.

<percentage>

Étire l'image dans la dimension concernée au pourcentage indiqué de la zone de positionnement de l'arrière-plan. La zone de positionnement de l'arrière-plan est déterminée par la valeur de background-origin (par défaut, la boîte de remplissage). Cependant, si la propriété background-attachment de l'arrière-plan vaut fixed, la zone de positionnement est alors l'ensemble de la zone d'affichage. Les valeurs négatives ne sont pas autorisées.

Dimensions intrinsèques et proportions

Le calcul des valeurs dépend des dimensions intrinsèques de l'image (sa largeur et sa hauteur) et de ses proportions intrinsèques (le rapport entre la largeur et la hauteur). Voici les différents cas de figures possibles :

• Une image matricielle (telle qu'une image JPG) possède toujours des dimensions intrinsèques et des proportions intrinsèques.
• Une image vectorielle (telle qu'une image SVG) ne possède pas nécessairement de dimensions intrinsèques. Si elle possède à la fois une dimension verticale et une dimension horizontale intrinsèques, elle possèdera alors des proportions intrinsèques. Si elle ne possède qu'une ou aucune dimension intrinsèque, elle peut avoir ou ne pas avoir de proportions.
• Les <gradient> CSS n'ont pas de dimensions intrinsèques ni de proportions intrinsèques.
• Les images d'arrière-plan créées avec la fonction element() utilisent les dimensions et proportions intrinsèques de l'élément générateur.

Selon le caractère intrinsèque ou non des dimensions et des proportions, la taille d'affichage de l'image d'arrière-plan est calculée de la façon suivante :

• Si les deux composants de background-size sont définis et qu'aucun ne vaut auto : L'image utilise la taille définie.

• Si background-size vaut contain ou cover : L'image est affichée et ses proportions sont conservées pour que l'image soit contenue dans la zone ou la recouvre complètement. Si l'image ne possède pas de proportions intrinsèques ; elle est affichée avec la taille de la zone de positionnement de l'arrière-plan.

• Si background-size vaut auto ou auto auto :

  • Si l'image possède deux dimensions intrinsèques, c'est cette taille qui est utilisée.
  • Si elle ne possède pas de dimension intrinsèque ni de proportion intrinsèque, elle est affichée avec la taille de la zone dédiée à l'arrière-plan.
  • Si elle n'a aucune dimension mais possède une proportion, elle sera affichée comme si la valeur contain avait été utilisée.
  • Si l'image possède une dimension intrinsèque et une proportion, elle est affichée avec cette dimension et cette proportion. L'autre dimension est calculée à partir de la dimension indiquée et des proportions intrinsèques.
  • Si l'image possède une dimension intrinsèque mais aucune proportion, elle sera affichée avec la dimension intrinsèque et l'autre dimension suivra la taille de la zone pour l'arrière-plan.

  Note : Les images SVG peuvent contenir un attribut preserveAspectRatio pour lequel la valeur par défaut est équivalente à contain. Une valeur explicite pour background-size permet d'ignorer preserveAspectRatio.

• Si background-size possède une composante auto et que l'autre composante est différente de auto :

  • Si l'image possède une proportion intrinsèque, elle sera affichée avec la dimension indiquée et la deuxième sera calculée grâce à la proportion.
  • Si l'image ne possède aucune proportion intrinsèque, la dimension indiquée sera utilisée pour la dimension concernée et on utilisera la dimension intrinsèque de l'image pour l'autre axe si elle existe. Sinon, on prendra la dimension de la zone de l'arrière-plan pour cet axe.

Définition formelle

Syntaxe formelle

background-size = 
  <bg-size>#  

<bg-size> = 
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain                                    

<length-percentage> = 
  <length>      |
  <percentage>  

Exemples

Réaliser un pavage

Prenons une image d'une taille qui ne correspond pas forcément à notre document cible. Ici, on a une image de 189x189 pixels et on souhaite réaliser un pavage avec quatre exemplaires de l'image dans un élément qui mesure 300x300 pixels. Pour cela, on fixe la valeur de background-size à 150 pixels.

HTML

<div class="tiledBackground"></div>

CSS

.tiledBackground {
  background-image: url("https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png");
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}

Résultat

Voir Redimensionner des images d'arrière-plan pour plus d'exemples.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Redimensionner les images d'arrière-plan
• Redimensionner les arrière-plans SVG
• La propriété object-fit