Propriété background-size
La propriété background-size définit la taille
de l'image de fond. Les valeurs de la propriété sont
n'importe quelle unité
de taille, ou les mots-clés auto,
cover ou contain.
Syntaxe
sélecteur {
background-size: valeur;
}
Mots-clés
| Valeur | Description |
|---|---|
auto |
Le fond aura sa taille naturelle, telle que
la taille réelle de l'image de fond.
Si auto est spécifié seulement pour un côté,
alors sur ce côté le fond sera mis à l'échelle
pour conserver les proportions non déformées.
|
cover |
Met à l'échelle l'image pour qu'elle couvre tout le bloc en conservant les proportions. L'image essaiera de tenir en entier, mais ce ne sera pas toujours possible, donc une partie de celle-ci sera rognée. Le bloc sera toujours entièrement couvert par l'image. |
contain |
Met à l'échelle l'image pour qu'elle tienne entièrement dans le bloc en conservant les proportions. Ainsi, elle pourra occuper toute la largeur, ou toute la hauteur (dépend des proportions de l'image et des dimensions de l'élément). Le bloc en général ne sera pas entièrement couvert par l'image (mais l'image sera toujours entièrement visible, même en version réduite). |
Valeur par défaut : auto.
Utilisation
Les unités de taille et auto peuvent être utilisées
dans diverses combinaisons, par exemple : auto 20px,
ou 30% 20px, ou auto 30%, etc.
Dans ce cas, le premier paramètre définit la taille
du fond en largeur, et le second paramètre - la taille
du fond en hauteur. Si un seul paramètre est indiqué - il
définira la taille du fond à la fois en largeur
et en hauteur.
Exemple
Maintenant l'image de fond aura sa taille naturelle :
<div id="elem"></div>
#elem {
background-repeat: no-repeat;
background-image: url("bg.png");
border: 1px solid black;
width: 550px;
height: 400px;
}
:
Exemple
Maintenant l'image de fond aura la taille 300px
sur 400px (dans notre cas les proportions
de l'image seront déformées) :
<div id="elem"></div>
#elem {
background-size: 300px 400px;
background-repeat: no-repeat;
background-image: url("bg.png");
border: 1px solid black;
width: 400px;
height: 400px;
}
:
Exemple
Maintenant l'image de fond aura la taille 400px
sur 400px (dans notre cas les proportions
de l'image seront déformées) :
<div id="elem"></div>
#elem {
background-size: 400px;
background-repeat: no-repeat;
background-image: url("bg.png");
border: 1px solid black;
width: 400px;
height: 400px;
}
:
Exemple
Maintenant l'image de fond aura la taille 400px
horizontalement, et verticalement sa taille
s'ajustera pour que les proportions ne soient pas déformées :
<div id="elem"></div>
#elem {
background-size: 400px auto;
background-repeat: no-repeat;
background-image: url("bg.png");
border: 1px solid black;
width: 400px;
height: 400px;
}
:
Exemple
Maintenant l'image de fond aura la taille 400px
verticalement, et horizontalement sa taille
s'ajustera pour que les proportions ne soient pas déformées :
<div id="elem"></div>
#elem {
background-size: auto 400px;
background-repeat: no-repeat;
background-image: url("bg.png");
border: 1px solid black;
width: 400px;
height: 400px;
}
:
Exemple . Valeur contain
Regardez le fonctionnement de la valeur contain :
<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>
.elem {
background-size: contain;
background-repeat: no-repeat;
background-image: url("bg.png");
border: 1px solid black;
margin-bottom: 20px;
}
#elem1 {
width: 600px;
height: 500px;
}
#elem2 {
width: 500px;
height: 600px;
}
#elem3 {
width: 400px;
height: 400px;
}
#elem4 {
width: 300px;
height: 400px;
}
#elem5 {
width: 200px;
height: 400px;
}
#elem6 {
width: 300px;
height: 100px;
}
:
Exemple . Valeur cover
Regardez le fonctionnement de la valeur cover :
<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>
.elem {
background-size: cover;
background-repeat: no-repeat;
background-image: url("bg.png");
border: 1px solid black;
margin-bottom: 20px;
}
#elem1 {
width: 600px;
height: 500px;
}
#elem2 {
width: 500px;
height: 600px;
}
#elem3 {
width: 400px;
height: 400px;
}
#elem4 {
width: 300px;
height: 400px;
}
#elem5 {
width: 200px;
height: 400px;
}
#elem6 {
width: 300px;
height: 100px;
}
:
Exemple . Améliorons le fonctionnement de cover
Le fonctionnement de la valeur cover peut être amélioré
en centrant l'image à l'aide de la propriété
background-position
(dans notre cas, les parties visibles commenceront à être
les têtes des chevaux, et non leurs derrières) :
<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>
.elem {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-image: url("bg.png");
border: 1px solid black;
margin-bottom: 20px;
}
#elem1 {
width: 600px;
height: 500px;
}
#elem2 {
width: 500px;
height: 600px;
}
#elem3 {
width: 400px;
height: 400px;
}
#elem4 {
width: 300px;
height: 400px;
}
#elem5 {
width: 200px;
height: 400px;
}
#elem6 {
width: 300px;
height: 100px;
}
:
Voir aussi
-
la propriété
background,
qui est une propriété raccourcie pour le fond
