CSS - Propriété background-size
Description de la propriété background-size
.
background-size
est la propriété CSS qui définit les dimensions de l'image d'arrière-plan.
Le comportement de la propriété background-size
est fortement lié à la présence ou à l'absence
de dimensions définies dans l'arrière-plan choisi (dimensions intrinsèques).
- Les images (fichiers jpeg, jpg, png, gif...) ont nécessairement des dimensions intrinsèques.
- Les dégradés n'ont pas de dimensions intrinsèques.
- Les fichiers
SVG
peuvent avoir ou non des dimensions intrinsèques.
Si vous souhaitez consulter des explications générales sur les arrière-plans en CSS, reportez-vous à la page généralités sur les arrière-plans.
Syntaxes de background-size
.
background-size: auto;
auto
est la valeur par défaut pourbackground-size
.
Si l'arrière-plan est une image, donc avec des dimensions intrinsèques, les dimensions de l'arrière-plan seront celles de l'image originale.
Si l'arrière-plan choisi n'a pas de dimensions intrinsèques, il sera dimensionné à la même taille que l'élément.background-size: cover;
Avec la valeur
cover
,background-size
redimensionne l'arrière-plan pour couvrir toute la surface de l'élément.
Si l'arrière-plan est une image et que la ratio de l'image est différent de celui de l'élément, une partie de l'image ne sera pas affichée.
Si l'arrière-plan n'a pas de dimensions intrinsèques, cover est équivalent à auto.background-size: contain;
L'arrière-plan est redimensionné pour être totalement visible.
Si l'arrière-plan est une image et que la ratio de l'image est différent de celui de l'élément, l'image peut être répétée ou bien une partie de l'élément ne sera pas couverte par l'image (voirbackground-repeat
pour gérer la répétition de l'arrière-plan).
Si l'arrière-plan n'a pas de dimensions intrinsèques,contain
est équivalent àauto
.background-size: 100px;
background-size
utilisée avec une valeur numérique unique : un nombre, positif ou égal à zéro, avec son unité de dimension (voir unités de dimensions en CSS). S'il s'agit d'un pourcentage il sera calculé par rapport à la largeur de l'élément.
Cette valeur sera utilisée pour dimensionner la largeur de l'image d'arrière-plan.
S'il s'agit d'une image, donc avec des dimensions intrinsèques, la hauteur sera calculée pour conserver les proportions de l'image originale.
Si l'arrière-plan n'a pas de dimensions intrinsèques,la hauteur sera calculée en fonction des proportions de l'élément.background-size: 100px 50px;
background-size
utilisée avec deux valeurs numériques séparées par un espace. Deux nombres, positifs ou égaux à zéro, avec leur unité de dimension (voir unités de dimensions en CSS).
La première valeur indique la largeur de l'arrière-plan ; la deuxième valeur sa hauteur.
S'il s'agit de pourcentages, le premier est calculé par rapport à la largeur de l'élément, et le deuxième par rapport à sa hauteur.
background-size: 100px 50px, cover, 100% 100%;
background-size
utilisée avec une série de paires de valeurs, chaque paire de valeurs étant séparées par une virgule. Cette syntaxe est utilisable lorsque plusieurs images d'arrière-plan ont été définies. Reportez-vous à la page arrière-plans multiples.-
Reportez-vous à la description générale de ces valeurs.
Simulateur.
background-size
:
Prise en charge par les navigateurs (compatibilité).
La propriété background-size
ne présente pas de problème de compatibilité
sur l'ensemble des navigateurs actuels.
Afficher le tableau de compatibilité (informations fournies par canIuse.com).
Voir aussi...
Arrière-plan - Propriétés.
background
: Résumé des propriétés de l'arrière-plan.background-attachment
: Mode de défilement de l'image d'arrière-plan.background-blend-mode
: Définit le mélange des couleurs entre image(s) d'arrière-plan et couleur d'arrière-plan.background-clip
: Interaction entre arrière-plan et bordure.background-color
: Définit la couleur de l'arrière-plan.background-image
: Image d'arrière-plan.background-origin
: Position de l'image d'arrière-plan.background-position
: Emplacement de l'image d'arrière-plan.background-repeat
: Mode de répétition de l'image d'arrière-plan.isolation
: Gère l'interaction entre les couches.mix-blend-mode
: Définit le mode de mélange entre le contenu et ce qui est visible en arrière-plan de l'élément.opacity
: Opacité (ou transparence).
Arrière-plan - Fonctions.
conic-gradient()
: Définit un dégradé de couleurs conique.linear-gradient()
: Détermine un dégradé de couleur linéaire.radial-gradient()
: Détermine un dégradé de couleur radial (depuis le centre vers les bords).repeating-conic-gradient()
: Définit un dégradé de couleurs conique, avec répétitionrepeating-linear-gradient()
: Détermine un dégradé de couleur linéaire avec répétition.repeating-radial-gradient()
: Détermine un dégradé de couleur radial avec répétition.