background-size

Résumé

La propriété CSS background-size spécifie la dimension des images d'arrière-plan.

Note : si la valeur de cette propriété n'est pas définie dans une propriété raccourcie background qui s'applique à l'élément après la propriété CSS background-size, la valeur de cette propriété sera réinitialisée à sa valeur par défaut par la propriété raccourcie.

Syntaxe

background-size:  background-size[ background-size]*

:

background-size
est l'un des mots-clés suivants :
  • contain, qui spécifie que l'image d'arrière-plan doit être mise à l'échelle pour être aussi grande que possible tout en assurant que les deux dimensions sont plus petites ou égales aux dimensions de la surface de positionnement.
  • cover, qui spécifie que l'image d'arrière-plan doit être mise à l'échelle pour être aussi petite que possible tout en assurant que les deux dimensions soient supérieures ou égales aux dimensions de la surface de positionnement. 
ou une ou deux des valeurs suivantes, indiquant respectivement la dimension horizontale et la dimension verticale (si seulement une des deux est précisée, la seconde est définie à auto) :
  • une valeur <percentage> qui met à l'échelle l'image d'arrière-plan aux dimensions correspondant à la surface de positionnement de l'arrière-plan, qui est définie par la valeur de background-origin. La surface de positionnement de l'arrière-plan est, par défaut, la surface contenant le contenu et les marges de remplissage (padding) ; la surface peut aussi être modifiée au contenu seulement ou à la zone contenant les bordures, les marges de remplissage et le contenu. Si la propriété attachment est définie à fixed, la zone de positionnement est alors toute la surface d'affichage du navigateur, excluant les zones couvertes par les barres de défilement si elles sont présentes. Les pourcentages négatifs ne sont pas acceptés.
  • une valeur <longueur> qui met à l'échelle l'image d'arrière-plan en mettant la dimension correspondant à la valeur définie. Les longueurs négatives ne sont pas acceptées.
  • le mot-clé auto qui met à l'échelle l'image d'arrière-plan dans la direction correspondante de manière à conserver les proportions de l'image originale.

L'interprétation des différentes valeurs possible dépend des dimensions originales de l'image (largeur et hauteur) et de la proportion originale (rapport de la largeur sur la hauteur). Une image bitmap possède toujours des dimensions et une proportion intrinsèques. Une image vectorielle peut avoir deux dimensions intrinsèques (ce qui induit une proportion intrinsèque). Mais elle peut aussi avoir une voire aucune dimension intrisèque, et dans chacun des cas peut avoir ou non une proportion intrisèque. Les dégradés sont considérés comme des images n'ayant ni dimensions intrisèques ni proportion intrinsèque. 

Gecko 8.0 note
(Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5)

Ce comportement a changé dans Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5). Avant cela, les dégradés étaient considérés comme des images sans dimensions intrisèques mais avec une proportion intrisèque correspondant à celle de la surface de positionnement de l'arrière-plan.

Les images d'arrière-plan générées depuis des éléments utilisant -moz-element (qui s'applique à un élément) sont actuellement traités comme des images possédant les dimensions de l'élément, ou de la surface de positionnement de l'arrière-plan si l'élément est en SVG, et ceci avec la proportion intrinsèque correspondante.

Note : ceci n'est pas le comportement spécifié, qui lui dit que les dimensions et proportions intrinsèques doivent être celles de l'élément quelque soit le cas de figure.

La taille des images d'arrière-plans générées est calculée de la manière suivante :

Si les deux composantes de background-size sont précisées et ne sont pas auto :
L'image d'arrière-plan est affichée aux dimensions spécifiées.
Si background-size est à contain ou cover :
L'image est affichée, conservant la proportion originale, à la plus grande dimension contenue ou couvrant la surface de positionnement de l'arrière-plan. Si l'image n'a pas de proportion intrinsèque, alors elle est affichée aux dimensions de la surface de positionnement de l'arrière-plan. 
Si background-size est à auto ou auto auto :
Si l'image possède deux dimensios intrinsèques, elle est affichée à cette taille. Si elle n'a ni dimensions intrinsèque ni proportion intrinsèque, elle est affichée à la taille de la surface de positionnement de l'arrière-plan. Si elle n'a pas de dimensions intrisèques mais une proportion, elle est affichée comme si la valeur contain avait été spécifiée. Si l'image a une dimension intrinsèque et une proportion intrinsèque, elle est affiché à la taille déterminée par une dimension et une proportion. Si l'image a une dimension intrisèque mais pas de proportion intrinsèque, elle est affichée en utilisant la dimension originale et l'autre dimensions correspondant à la surface de positionnement de l'arrière-plan.
Si background-size n'a qu'une composante auto et une composante qui n'est pas auto :
Si l'image a une proportion intrinsèque, alors elle est affichée en utilisant la dimension spécifiée et la seconde dimension est calculée grâce à la proportion intrinsèque et la dimension précisée. Si l'image n'a pas de proportion intrisèque, la dimension spécifiée est utilisée. Pour la seconde, si une autre dimension intrisèque existe alors elle est utilisée sinon la dimension utilisée est celle de la surface de positionnement de l'arrière-plan.

Il faut noter que le dimensionnement des images vectorielles qui n'ont pas de dimensions intrinsèques ou de proportion intrisèque n'est pas complètement supportée dans tous les navigateurs. Soyez prudents avec les comportements décris ci-dessus et testez dans différents navigateurs (particulièrement avec les versions de Firefox 7 et précédentes et Firefox 8 et suivantes) pour vous assurer que les rendus sont acceptables.

Exemples

Cette démonstration de background-size: cover et cette démonstration de background-size: contain sont supposées être ouvertes dans de nouvelles fenêtres pour que vous puissiez voir comment contain et cover se comportent lorsque la surface de positionnement de l'arrière-plan varie. Cette série de démonstrations montre comment background-size fonctionne et interagi avec les autres propriétés background-* couvre presque exhaustivement l'utilisation de background-size seul et en parallèle d'autres propriétés.

Notes

Si vous définissez un dégradé comme arrière-plan et que vous avec précisé la propriété background-size qui vient avec, il est préférable de ne pas préciser une dimension utilisant une seule composante auto, ou qui utilise seulement une valeur de largeur (par exemple, background-size: 50%). L'affichage des dégradés dans ce cas d'utilisation a été modifié dans Firefox 8, et désormais il est inégal selon les navigateurs, qui n'implémentent pas tous le rendu comme spécifié dans la spécification CSS3 background-size ou dans la spécification des dégradés selon CSS3 Image Values.

.bar {
       width: 50px; height: 100px;
       background-image: gradient(...);

       /* NON RECOMMANDÉ */
       background-size: 25px;
       background-size: 50%;
       background-size: auto 50px;
       background-size: auto 50%;

       /* ACCEPTABLE */
       background-size: 25px 50px;
       background-size: 50% 50%;
}

Il faut noter qu'il est particulièrement non recommandé de définir une dimension en pixels et une dimension auto pour un dégradé, puisqu'il est impossible de reproduire le rendu dans les version de Firefox antécédantes à la version 8, et dans les navigateurs qui n'ont pas implémentés le rendu de Firefox 8, sans connaître les dimensions exactes de l'arrière-plan de l'élément qui est défini.

Spécifications

Spécification Statut Commentaire
CSS Backgrounds and Borders Module Level 3 Candidate Recommendation  

Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base 1.0-webkit [2] 3.6 (1.9.2)-moz [4] 9.0 9.5-o
avec quelques bogues [1]
3.0 (522)-webkit
correspondant à un ancien brouillon CSS3 [2]
   
3.0 4.0 (2.0) 10.0 4.1 (532)
Support de contain et cover 3.0 3.6 (1.9.2) 9.0 10.0 4.1 (532)
Support des arrière-plans SVG ? 8.0 (8.0) ? ? ?
FeaFonction Android Firefox Mobile (Gecko) Windows Phone Opera Mobile Safari Mobile
Support de base (Oui)-webkit
2.3
? ? ? ?
Support des arrière-plans SVG ? 8.0 (8.0) ? ? ?

[1] La méthode de calcul de la surface de positionnement de l'arrière plan de Opera 9.5 est incorrecte pour les arrière-plans fixés. Opera 9.5 interprête la forme définissant les deux composantes comme un facteur de mise à l'échelle horizontale, et apparemment, une dimension verticale de coupure (clipping). Ceci a été résolu dans Opera 10.

[2] Les navigateurs utilisant WebKit ont d'abord implémenté un brouillon plus ancien CSS3 de background-size dans lequel une seconde valeur omise était interprétée en copiant la première valeur ; ce brouillon n'inclue pas les mots-clés contain et cover.

[3] Konqueror 3.5.4 supporte -khtml-background-size.

[4] Tandis que cette propriété est nouvelle dans Gecko 1.9.2 (Firefox 3.6), il est possible d'étirer une image à toute la surface d'arrière-plan dans Firefox 3.5 en utilisant -moz-border-image.

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

       -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
         -o-background-size: 100% 100%;           /* Opera 9.5 */
    -webkit-background-size: 100% 100%;           /* Safari 3.0 */
            background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) et les autres navigateurs gérant CSS3 */
 
       -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
}

Voir également

Étiquettes et contributeurs liés au document

Étiquettes : 
Dernière mise à jour par : teoli,
Masquer la barre latérale