Affecter des styles différents à de mêmes balises. Le concept des attributs: class et id....
Définition et utilisation de la propriété CSS background-size
La propriété background-size définie la taille de l'images de fond c'est-à-dire l’arrière plan d’un élément.
|
Valeur par défaut : |
Auto |
|
Héritée : |
ne |
|
Animer : |
Oui. Découvrez animatable L'essayer |
|
Version: |
CSS3 |
|
Syntaxe JavaScript : |
objet. style.backgroundSize="60px 120px" L'essayer |
Astuce : La propriété background-size est généralement utilisée pour créer des images de fond qui peuvent évoluer selon la taille de la fenêtre d'affichage ou la largeur du navigateur.
Appui de navigateurs de la propriété CSS background-size
Les nombres dans le tableau spécifient la version à partir du quelle le navigateur prend totalement en charge la propriété background-size.
Propriété | Navigateur |
| | | | |
|
background-clip |
4.0 |
9.0 |
4.0 |
4.1 |
10.5 |
Syntaxe de la propriété CSS background-size
La syntaxe de la propriété est donnée comme suit :
background-size: auto|length|cover|contain|initial|inherit;
Valeurs de propriété CSS background-size
Valeur | Description |
|---|---|
|
auto |
Valeur par défaut. L’image est affichée dans toute sa largeur et hauteur |
|
length |
Deux nombres qui définissent la largeur et la hauteur de l'image de fond. La première valeur définit la largeur, la deuxième valeur définit la hauteur. Si une seule valeur est donnée, la seconde est réglée sur "Auto" Exemple : background-size:100px 100px;
|
|
percentage |
Deux pourcentages qui définissent la largeur et la hauteur de l'image d'arrière-plan en pour cent de l'élément parent. La première valeur définit la largeur, la deuxième valeur définit la hauteur. Si une seule valeur est donnée, la seconde est réglé sur "Auto" Exemple : background-size:70% 500%;
|
|
cover |
Échelle de l'image d'arrière-plan pour être aussi grand que possible de sorte que la zone de fond est complètement recouverte par l'image de fond. Il se peut que certaines parties de l'image d'arrière-plan ne peuvent pas être en vue dans la zone de positionnement de fond |
|
contain |
Echelonne l'image à la plus grande taille tels que sa largeur et sa hauteur peuvent s’adapter à l'intérieur de la zone de contenu |
|
initial |
Définit cette propriété à sa valeur par défaut. |
|
inherit |
Hérite cette propriété de son élément parent. |
Exemple :
Sélectionner le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple de la propriété CSS background-size</title>
<style type="text/css">
.boite {
width: 250px;
height: 150px;
background:url("http://nospetitstresors.cowblog.fr/images/PaysagesetNature/paysage067.jpg") no-repeat;
background-size: cover;
border: 6px dashed #222;
}
</style>
</head>
<body>
<div class="boite"></div>
</body>
</html>
Remarque: Dans l’exemple la taille originale de l'image de fond est 580x406 pixels, mais en utilisant la propriété background-size nous sommes encore en mesure de montrer l'image complète à l'intérieur de la petite boîte.
Par Gerywa 11 Janvier 2016