background-size

La propriété background-size définit la taille des images d'arrière-plan pour l'élément. La taille de l'image peut être contrainte, complètement ou partiellement afin de conserver ses proportions.

Note : Si la valeur de cette propriété n'est pas définie avec la propriété raccourcie background et que cette dernière est utilisée après la déclaration de background-size, la valeur de la propriété sera réinitialisée à la valeur initiale par la propriété raccourcie.

Valeur initialeauto auto
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéenon
Pourcentagesrelatifs à la zone de positionnement du fond
Médiavisuel
Valeur calculéecomme spécifié, mais avec les longueurs relatives converties en longueurs absolues
Animation typeune liste répétable de , une simple liste de , une longueur, pourcentage ou calc() ;, keywords
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

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

/* Une seule valeur                        */
/* La valeur désigne la largeur de l'image.*/
/* La hauteur vaut 'auto'.                 */
background-size: 50%;
background-size: 3em;
background-size: 12px;
background-size: auto;

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

/* Valeurs pour plusieurs arrières-plans  */
/* respectives à chaque background-image. */
/* À ne pas confondre avec auto auto      */
background-size: auto, auto;
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

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

Valeurs

<length>
Une valeur de type <length> qui redimensionne l'image afin que celle-ci occupe la longueur indiquée dans la dimension concernée. Les valeurs négatives ne sont pas autorisées.
<percentage>
Une valeur de type <percentage> qui redimensionne l'image d'arrière-plan proportionnellement à la taille de la zone dédiée à l'arrière-plan, définie via background-origin. Par défaut, cette zone correspond à la boîte de contenu et de remplissage (padding) mais peut être modifiée pour contenir uniquement la boîte de contenu ou, à l'inverse, les boîtes de contenu, remplissage et marge. Si la propriété background-attachment vaut fixed, la zone de positionnement de l'arrière-plan sera la fenêtre du navigateur (sans les barres de défilement). Les valeurs négatives ne sont pas autorisées.
auto
Un mot-clé qui redimensionne l'image d'arrière-plan afin que ses proportions soient conservées.
contain
Un mot-clé qui redimensionne l'image afin qu'elle soit la plus grande possible et que l'image conserve ses proportions. L'image est contrainte dans le conteneur. Les zones éventuellement vide sont remplies avec la couleur d'arrière-plan (définie grâce à background-color). Par défaut, l'image est centrée sauf si background-position a été modifiée.
cover
Un mot-clé dont le comportement est opposé à celui de contain. L'image est redimensionnée pour être aussi grande que possible et pour conserver ses proportions. L'image couvre toute la largeur ou la hauteur du conteneur et les parties qui dépassent sont rognées si les proportions du conteneur sont différentes (il n'y aucun espace libre sur lequel on verrait la couleur d'arrière-plan).

L'interprétation de ces valeurs dépend des dimensions intrinsèques de l'image (sa largeur et sa hauteur) et aussi de sa proportion. Une image matricielle possède toujours des dimensions intrinsèques et une proportion intrinsèque. Une image vectorielle peut avoir les deux dimensions intrinsèques (et donc une proportion intrinsèque) ou bien n'avoir qu'une ou zéro dimension intrinsèque (et donc éventuellement aucune proportion intrinsèque). Les gradients sont traités comme des images sans dimensions ni proportion intrinsèque.

La taille du rendu pour l'image 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 dimensions 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. 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. Pour Firefox 43, à la différence de Chrome 52, 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.

On notera que le dimensionnement des images vectorielles sans dimension intrinsèque et/ou sans proportion intrinsèque n'est pas complètement implémenté pour tous ls navigateurs. Attention donc aux différences de comportements et à bien tester parmi les différents navigateurs ciblés.

Syntaxe formelle

<bg-size>#


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


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

Exemples

cover

CSS

div {
  height: 300px;
  width: 200px;
  background-color: palegreen;
  background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg);
  background-repeat: no-repeat;
}

.exemple_cover {
  background-size: cover;
}

HTML

<div class="exemple_cover"></div>

Résultat

contain

CSS

div {
  height: 300px;
  width: 200px;
  background-color: palegreen;
  background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg);
  background-repeat: no-repeat;
}

.exemple_cover {
  background-size: contain;
}

HTML

<div class="exemple_cover"></div>

Résultat

auto 50%

CSS

div {
  height: 300px;
  width: 200px;
  background-color: palegreen;
  background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg);
  background-repeat: no-repeat;
}

.exemple_cover {
  background-size: auto 50%;
}

HTML

<div class="exemple_cover"></div>

Résultat

Spécifications

Spécification État Commentaires
CSS Backgrounds and Borders Module Level 3
La définition de 'background-size' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple 1.0-webkit[1]
3.0
3.6 (1.9.2)-moz[2]
4.0 (2.0)[3]
9.0[4] 9.5-o[5]
10.0
3.0 (522)-webkit[1]
4.1 (532)
contain et cover 3.0 3.6 (1.9.2) 9.0[4] 10.0 4.1 (532)
Arrière-plans SVG 44.0 8.0 (8.0) 9.0 31.0 ?
Fonctionnalité Android Firefox Mobile (Gecko) Windows Phone Opera Mobile Safari Mobile
Support simple (Oui)-webkit
2.3
1.0-moz
4.0[3]
? ? 5.1 (maybe earlier)
Arrière-plans SVG ? 8.0 (8.0) ? ? ?

[1] Initialement, les navigateurs basés sur WebKit implémentaient un ancien brouillon de spécification CSS3 pour background-size dans lequel, si la seconde valeur était absente, le moteur dupliquait la première valeur. Ce brouillon n'inclue pas les mots-clés contain ou cover.

[2] Cette propriété est apparue avec Gecko 1.9.2 (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0), mais on pouvait recouvrir un arrière-plan avec une image à partir de Gecko 1.9.1 (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0) avec -moz-border-image.

.toto {
  background-image: url(bg-image.png);

  -webkit-background-size: 100% 100%;           /* Safari 3.0 */
     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
       -o-background-size: 100% 100%;           /* Opera 9.5 */
          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
 
  -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
}

[3] En plus de la version préfixée par -moz, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.

[4] Bien qu'Internet Explorer 8 ne prenne pas en charge la propriété background-size, on peut en partie l'émuler avec la propriété non-standard -ms-filter :

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='chemin_vers_fichier_HTML', sizingMethod='scale')";

Cela permet de simuler la valeur cover.

[5] Le calcul d'Opera 9.5 pour le positionnement de l'arrière-plan est incorrect pour les arrière-plans fixes. Opera 9.5 interprète la forme bivaluée comme un facteur d'agrandissement horzontal et comme une dimension verticale de rognage. Cela a été corrigé avec Opera 10.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, Prinz_Rana, fscholz, teoli, FredB, claudepache, tregagnon
 Dernière mise à jour par : SphinxKnight,