Propriété CSS background-size
La propriété background-size définit la taille de l'image de fond. Cette propriété a cinq valeur: auto, length, percentages, cover, contain.
"Auto" spécifie l'image de fond en sa taille originelle. Elle est la valeur initiale. "Length" spécifie la hauteur et la largeur de background image. Valeurs négatives sont invalides. "Percentage" définit la hauteuret la largeur de background-image en pourcentages. Valeurs négatives sont invalides.
"Cover" éscaille l'image aussi grande que possible sans étirement. Si les proportions de l'image différencient de l'élément, elle est coupée soit vérticalement, soit horizontalement, afin que l'espace vide reste.
"Contain" redimensionne l'image de fond, afin que l'image soit complètement visible.
| Valeur initiale | auto |
| Appliquée à | Tous les éléments. Elle est aussi appliquée aux éléments pseudos ::first-letter et ::first-line. |
| Héritée | Non. |
| Animable | Oui. La taille de l'image de fond est animable. |
| Version | CSS3 |
| Syntaxe DOM | object.style.backgroundSize = "50% 100%"; |
Syntaxe
background-size: auto | length | cover | contain | initial | inherit;Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/03/7d63bc08d3afd72d19eb11bff0939b634e64b997.png");
background-size: 300px 200px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Exemple de background-size.</h2>
<p>On peut placer quelques informations ici.</p>
</body>
</html>Résultat
Dans l'exemple donné, la valeur "length" est appliquée. Elle définit la largeur et la hauteur de l'image de fond. La première valeur définit la largeur, la deuxième définit la hauteur. S'il y a une valeur donnée, la deuxième est définit "auto".
Voyons un autre exemple, où la largeur et la hauteur de background-image sont définies en pourcentages.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du 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>Exemple de background-size.</h2>
<p>On peut placer quelques informations ici.</p>
</body>
</html>Résultat
Voyons un exemple avec une valeur "cover", qui éscaille l'image aussi grande que possible sans étirement.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du 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>Exemple de background-size.</h2>
<p>On peut placer quelques informations ici.</p>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| auto | La valeur initiale. Elle définit l'image de fond en sa taille originelle. |
| length | Elle définit la largeur et la hauteur de l'image de fond. La première valeur définit la largeur, la deuxième définit la hauteur. S'il y a une valeur donnée, la deuxième est définit "auto". Spécifiée en “px”, “em”. |
| percentage | Elle définit la largeur et la hauteuren pourcentage. La première valeur définit la largeur, la deuxième définit la hauteur. S'il y a une valeur donnée, la deuxième est définit "auto". |
| cover | Elle éscaille l'image de fond aussi grande que possible pour qu'elle occupe tout l'espace de fond. |
| contain | Elle éscaille l'image de fond à la taille plus grande, pour que sa largeur et hauter puissent complir la zone de contenu. |
| initial | Définit la valeur initiale. |
| inherit | Hérite la propriété de l'élément parent. |
Support de Navigateurs
|
|
|
|
|---|---|---|---|
| 15.0+ |
4.0+ 3.6 -moz- |
7.0+ |
11.5+ 10.1 -o- |
Pratiquez vos connaissances
