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 pour background-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 (voir background-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.

• background-size: inherit | initial | unset;

  Reportez-vous à la description générale de ces valeurs.

Simulateur.

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étition
• repeating-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.