Propriété CSS background-size
La propriété background-size est utilisée pour définir la taille de l’image d’arrière-plan.
La propriété background-size fait partie des propriétés CSS3.
Cette propriété possède cinq valeurs : auto, length, percentage, cover, contain.
auto définit l’image d’arrière-plan dans sa taille d’origine. C’est la valeur par défaut. length spécifie la hauteur et la largeur de l’image d’arrière-plan. Les valeurs négatives ne sont pas valides. percentage définit la hauteur et la largeur de l’image d’arrière-plan à l’aide de pourcentages. Les valeurs négatives ne sont pas valides non plus.
cover redimensionne l’image aussi grande que possible sans la déformer. Si les proportions de l’image diffèrent de celles de l’élément, elle est rognée verticalement ou horizontalement afin qu’il ne reste aucun espace.
contain redimensionne l’image d’arrière-plan de sorte que l’image soit entièrement visible.
Il existe des images, comme JPEG, qui ont des tailles et des proportions intrinsèques, et des images, comme les dégradés, qui n’en ont pas. Sauf indication contraire, les secondes occupent toujours la taille de la zone d’arrière-plan d’un élément.
La propriété background-size accepte également des valeurs séparées par des virgules, et lorsque l’élément possède plusieurs images d’arrière-plan, chacune des valeurs sera appliquée à une image d’arrière-plan correspondante. Par exemple, la première valeur est appliquée au premier background-image, la deuxième à la deuxième image, etc.
| Valeur initiale | auto |
|---|---|
| S’applique à | Tous les éléments. Elle s’applique aussi à ::first-letter et ::first-line. |
| Héritée | Non. |
| Animable | Oui. La taille de l’image d’arrière-plan est animable. |
| 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 la forme abrégée 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("https://fr.w3docs.com/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 length 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 seconde définit la hauteur. Si une seule valeur est fournie, la seconde est définie sur auto.
Voyez un autre exemple où la largeur et la hauteur de l’image d’arrière-plan 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 la valeur % (pourcentage)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("https://fr.w3docs.com/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 la déformer.
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("https://fr.w3docs.com/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("https://fr.w3docs.com/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("https://fr.w3docs.com/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 la valeur "length" :
Exemple de la propriété background-size avec la valeur "length" :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 260px;
height: 190px;
background: url("https://fr.w3docs.com/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 | Play it |
|---|---|---|
| auto | C’est la valeur par défaut. Elle définit l’image d’arrière-plan dans sa taille d’origine. | Play it » |
| 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 seconde la hauteur. Si une seule valeur est fournie, la seconde est définie sur auto. Elle est spécifiée par « px », « em ». | Play it » |
| percentage | Définit la largeur et la hauteur en pourcentages. La première valeur définit la largeur et la seconde la hauteur. Si une seule valeur est fournie, la seconde est définie sur auto. | Play it » |
| cover | Redimensionne l’image d’arrière-plan à la plus grande taille possible pour couvrir toute la zone d’arrière-plan. | Play it » |
| contain | Redimensionne l’image d’arrière-plan à la plus grande taille afin que sa largeur et sa hauteur puissent tenir dans la zone d’arrière-plan. | Play it » |
| initial | Définit la propriété sur sa valeur par défaut. | Play it » |
| inherit | Hérite de la propriété de son élément parent. |
Practice
In CSS, what are the possible values for the 'background-size' property?