Propriété CSS background-size
La propriété CSS background-size définit la taille de l'image d'arrière-plan. Découvrez ses valeurs et essayez des exemples interactifs.
La propriété CSS background-size définit la taille rendue de l'image d'arrière-plan d'un élément. Par défaut, une image d'arrière-plan s'affiche à sa taille naturelle (intrinsèque) ; background-size vous permet de la redimensionner à des dimensions exactes, de l'étirer par des pourcentages, ou de la faire remplir ou s'adapter automatiquement à l'élément.
Cette page couvre toutes les valeurs acceptées par la propriété, la différence entre les deux mots-clés les plus utiles (cover et contain), son comportement avec plusieurs arrière-plans, et des exemples interactifs pour chaque cas. Il s'agit de l'une des propriétés CSS3.
Aperçu des valeurs
La propriété accepte les valeurs suivantes :
auto— la valeur par défaut. L'image conserve sa taille et ses proportions intrinsèques.<length>— largeur et hauteur explicites, par ex.300px 200px. Les valeurs négatives sont invalides.<percentage>— tailles relatives à la zone de positionnement de l'arrière-plan de l'élément, par ex.40% 100%. Les valeurs négatives sont invalides.cover— redimensionne l'image (en conservant son rapport d'aspect) jusqu'à ce qu'elle couvre entièrement l'élément. Le débordement est rogné.contain— redimensionne l'image (en conservant son rapport d'aspect) jusqu'à ce qu'elle s'inscrive exactement à l'intérieur de l'élément. Des espaces vides peuvent apparaître.
Lorsque vous donnez deux valeurs, la première représente la largeur et la seconde la hauteur. Si vous n'en donnez qu'une seule, elle définit la largeur et la hauteur prend la valeur par défaut auto, de sorte que l'image conserve son rapport d'aspect.
cover vs. contain — lequel utiliser
Ces deux mots-clés sont ceux auxquels on a le plus souvent recours, et il est facile de les confondre :
covergarantit l'absence d'espace vide — l'image remplit toujours la boîte. L'inconvénient est que des parties de l'image peuvent être rognées lorsque son rapport d'aspect ne correspond pas à celui de l'élément. Utilisez-le pour les bannières héro et les arrière-plans de sections pleine largeur où vous ne voulez jamais d'espaces.containgarantit que l'image entière est visible — rien n'est rogné. L'inconvénient est que des bandes vides peuvent apparaître sur les côtés ou en haut/bas. Utilisez-le pour les logos, les icônes ou toute image que vous devez afficher en entier.
Les deux conservent le rapport d'aspect original, l'image n'est donc jamais déformée. Pour étirer une image à des dimensions exactes (ce qui peut la déformer), utilisez plutôt des valeurs <length> ou <percentage> explicites.
Images avec et sans taille intrinsèque
Certaines images, comme les JPEG et PNG, ont des tailles et des proportions intrinsèques. D'autres, comme les dégradés CSS, n'en ont pas. Une image sans taille intrinsèque occupe toute la zone d'arrière-plan de l'élément, sauf indication contraire ; ainsi, background-size se comporte un peu différemment avec les dégradés qu'avec les images matricielles.
Plusieurs images d'arrière-plan
background-size accepte des valeurs séparées par des virgules. Lorsqu'un élément possède plusieurs images d'arrière-plan, chaque taille est associée à une image d'arrière-plan dans l'ordre — la première valeur s'applique à la première background-image, la deuxième à la deuxième, et ainsi de suite :
background-image: url("logo.png"), url("texture.png");
background-size: 100px 100px, cover;| Valeur initiale | auto |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter et ::first-line. |
| Hérité | Non. |
| Animatable | Oui. La taille de l'image d'arrière-plan est animatable. |
| Version | CSS3 |
| Syntaxe DOM | object.style.backgroundSize = "50% 100%"; |
Syntaxe
Syntaxe de la propriété CSS background-size
background-size: auto | length | percentage | cover | contain | initial | inherit;La propriété background-size est souvent utilisée avec le raccourci background, par exemple :
background: url("image.jpg") no-repeat center / cover;Exemple de la propriété background-size :
Exemple de la propriété CSS background-size avec une valeur en px
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: 300px 200px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Résultat
Dans l'exemple ci-dessus, la valeur de longueur est appliquée. Elle définit la largeur et la hauteur de l'image d'arrière-plan. La première valeur définit la largeur, et la deuxième valeur définit la hauteur. Si une seule valeur est donnée, la deuxième est définie sur auto.
Voici un autre exemple où la largeur et la hauteur de la background-image sont définies par des pourcentages.
Exemple de la propriété background-size avec la valeur "%" :
Exemple de la propriété CSS background-size avec une valeur en % (pourcentage)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: 40% 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>La valeur cover rend l'image aussi grande que possible sans l'étirer.
Exemple de la propriété background-size avec la valeur "cover" :
Exemple de la propriété CSS background-size avec la valeur cover
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Exemple de la propriété background-size avec la valeur "contain" :
Exemple de la propriété CSS background-size avec la valeur "contain" :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: contain;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Exemple de la propriété background-size avec la valeur "auto" :
Exemple de la propriété CSS background-size avec la valeur "auto" :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: auto;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Exemple de la propriété background-size avec une seule valeur de longueur :
Ici, une seule valeur (260px) est donnée, la largeur est donc définie explicitement et la hauteur revient à auto, préservant le rapport d'aspect de l'image à l'intérieur d'un <div> de taille fixe.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 260px;
height: 190px;
background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg") no-repeat;
background-size: 260px;
}
</style>
</head>
<body>
<h1>CSS background-size property </h1>
<p>Example of the background-size property with a length value.</p>
<div></div>
</body>
</html>Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| auto | Il s'agit de la valeur par défaut. Elle affiche l'image d'arrière-plan à sa taille originale. | Essayer » |
| length | Définit la largeur et la hauteur de l'image d'arrière-plan. La première valeur définit la largeur et la deuxième définit la hauteur. Si une seule valeur est donnée, la deuxième est définie sur auto. Elle est spécifiée en "px", "em". | Essayer » |
| percentage | Définit la largeur et la hauteur en pourcentages. La première valeur définit la largeur et la deuxième définit la hauteur. Si une seule valeur est donnée, la deuxième est définie sur auto. | Essayer » |
| cover | Redimensionne l'image d'arrière-plan aussi grande que possible pour couvrir toute la zone d'arrière-plan. | Essayer » |
| contain | Redimensionne l'image d'arrière-plan à la plus grande taille possible de sorte que sa largeur et sa hauteur s'inscrivent dans la zone d'arrière-plan. | Essayer » |
| initial | Définit la propriété à sa valeur par défaut. | Essayer » |
| inherit | Hérite de la propriété de son élément parent. |
Conseils et propriétés associées
background-sizeest souvent combiné avecbackground-positionetbackground-repeatpour contrôler précisément la façon dont l'image est placée et redimensionnée.- Dans le raccourci
background, la taille vient après la position, séparée par une barre oblique :background: url("image.jpg") no-repeat center / cover;. La position est obligatoire lorsque vous fournissez une taille de cette façon. - Pour redimensionner un élément
<img>(plutôt qu'un arrière-plan CSS) tout en contrôlant le rognage, utilisezobject-fit, qui offre le même comportementcoveretcontainpour les éléments remplacés. coveretcontainsimplifient les arrière-plans pleine page ou réactifs : associerbackground-size: coverà unbackground-attachmentfixe produit un héro classique pleine largeur qui s'adapte à n'importe quel viewport.