Propriété CSS background-size
Exemple
Spécifiez la taille d'une image de fond avec "auto" et en pixels :
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}
#example2 {
background: url(mountain.jpg);
background-repeat:
no-repeat;
background-size: 300px 100px;
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La background-sizepropriété spécifie la taille des images d'arrière-plan.
Il existe quatre syntaxes différentes que vous pouvez utiliser avec cette propriété : la syntaxe des mots-clés ("auto", "cover" et "contain"), la syntaxe à une valeur (définit la largeur de l'image (la hauteur devient "auto"), la syntaxe la syntaxe à deux valeurs (première valeur : largeur de l'image, deuxième valeur : hauteur) et la syntaxe d'arrière-plan multiple (séparée par une virgule).
| Valeur par défaut: | auto |
|---|---|
| Hérité: | non |
| Animable : | Oui. En savoir plus sur l'animation |
| Version: | CSS3 |
| Syntaxe JavaScript : | objet .style.backgroundSize="60px 120px" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Les nombres suivis de -webkit-, -moz- ou -o- spécifient la première version qui a fonctionné avec un préfixe.
| Property | |||||
|---|---|---|---|---|---|
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
Syntaxe CSS
background-size: auto|length|cover|contain|initial|inherit;
Valeurs de propriété
| Value | Description | Play it |
|---|---|---|
| auto | Default value. The background image is displayed in its original size | |
| length | Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Read about length units | |
| percentage | Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto" | |
| cover | Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges | |
| contain | Resize the background image to make sure the image is fully visible | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Plus d'exemples
Exemple
Spécifiez la taille d'une image d'arrière-plan avec un pourcentage :
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100%
100%;
}
#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 75%
50%;
}
Exemple
Spécifiez la taille d'une image de fond avec "cover":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}
Exemple
Spécifiez la taille d'une image d'arrière-plan avec "contain":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain;
}
Exemple
Ici, nous avons deux images de fond. Nous spécifions la taille de la première image d'arrière-plan avec "contain", et la deuxième image d'arrière-plan avec "cover":
#example1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain, cover;
}
Exemple
Utilisez différentes propriétés d'arrière-plan pour créer une image "héro":
.hero-image {
background-image: url("photographer.jpg"); /* The
image used */
background-color: #cccccc; /* Used if the image is
unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
Pages connexes
Tutoriel CSS : Arrière-plans CSS
Référence HTML DOM : propriété backgroundSize