Arrière-plans multiples CSS
Dans ce chapitre, vous apprendrez à ajouter plusieurs images d’arrière-plan à un élément.
Vous découvrirez également les propriétés suivantes :
background-sizebackground-originbackground-clip
Arrière-plans multiples CSS
CSS vous permet d’ajouter plusieurs images d’arrière-plan pour un élément, via le
background-image propriété.
Les différentes images d’arrière-plan sont séparées par des virgules et les images sont empilées les unes sur les autres, là où la première image est la plus proche du spectateur.
L’exemple suivant comporte deux images d’arrière-plan, la première image est une fleur (alignée en bas et à droite) et la seconde image est un arrière-plan papier (aligné sur le coin supérieur gauche) :
Exemple
#Exemple 1 {
image d’arrière-plan : url(img_flwr.gif), url(paper.gif);
background-position : en bas à droite, en haut à gauche ;
background-repeat : non-répétition, répétition ;
}
Essayez-le vous-même »
Plusieurs images d’arrière-plan peuvent être spécifiées à l’aide des propriétés d’arrière-plan individuelles (comme ci-dessus) ou de la background propriété abrégée.
L’exemple suivant utilise le background propriété abrégée (même résultat que l’exemple ci-dessus):
Exemple
#Exemple 1 {
arrière-plan : url(img_flwr.gif) pas de répétition en bas à droite, url(paper.gif) répétition en haut à gauche ;
}
Essayez-le vous-même »
Taille d’arrière-plan CSS
Le CSS background-size La propriété vous permet de spécifier la taille des images d’arrière-plan.
La taille peut être spécifiée en longueurs, en pourcentages ou en utilisant l’un des deux mots-clés : contenir ou couvrir.
L’exemple suivant redimensionne une image d’arrière-plan beaucoup plus petite que l’image d’origine (en pixels) :
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Voici le code :
Exemple
#div1 {
arrière-plan : url(img_flower.jpg);
taille d’arrière-plan : 100px 80px ;
répétition d’arrière-plan : pas de répétition ;
}
Essayez-le vous-même »
Les deux autres valeurs possibles pour background-size sont contain
et cover.
Le contain Le mot-clé redimensionne l’image d’arrière-plan pour qu’elle soit aussi grande que possible (mais sa largeur et sa hauteur doivent tenir à l’intérieur de la zone de contenu). Ainsi, en fonction des proportions de l’image d’arrière-plan et de la zone de positionnement de l’arrière-plan, certaines zones de l’arrière-plan peuvent ne pas être couvertes par l’image d’arrière-plan.
Le cover Le mot clé met à l’échelle l’image d’arrière-plan de sorte que la zone de contenu soit entièrement couverte par l’image d’arrière-plan (sa largeur et sa hauteur sont égales ou supérieures à la zone de contenu). Ainsi, certaines parties de l’image d’arrière-plan peuvent ne pas être visibles dans la zone de positionnement de l’arrière-plan.
L’exemple suivant illustre l’utilisation de contain et cover:
Exemple
#div1 {
arrière-plan : url(img_flower.jpg);
taille d’arrière-plan : contenir ;
répétition d’arrière-plan : pas de répétition ;
}
#div2 {
arrière-plan : url(img_flower.jpg);
taille de fond : couverture ;
répétition d’arrière-plan : pas de répétition ;
}
Essayez-le vous-même »
Définir les tailles de plusieurs images d’arrière-plan
Le background-size La propriété accepte également plusieurs valeurs pour la taille d’arrière-plan (à l’aide d’une liste séparée par des virgules), lorsque vous travaillez avec plusieurs arrière-plans.
L’exemple suivant a trois images d’arrière-plan spécifiées, avec une valeur de taille d’arrière-plan différente pour chaque image :
Exemple
#Exemple 1 {
arrière-plan : url(img_tree.gif) en haut à gauche non répété, url(img_flwr.gif) en bas à droite non répété, url(paper.gif) en haut à gauche répété ;
taille d’arrière-plan : 50px, 130px, automatique ;
}
Essayez-le vous-même »
Image d’arrière-plan pleine grandeur
Maintenant, nous voulons avoir une image d’arrière-plan sur un site Web qui couvre à tout moment la totalité de la fenêtre du navigateur.
Les exigences sont les suivantes :
- Remplissez toute la page avec l’image (pas d’espace blanc)
- Mettre l’image à l’échelle selon les besoins
- Centrer l’image sur la page
- Ne provoque pas de barres de défilement
L’exemple suivant montre comment procéder ; Utilisez l’élément (l’élément est toujours au moins à la hauteur de la fenêtre du navigateur). Définissez ensuite un arrière-plan fixe et centré dessus. Ajustez ensuite sa taille avec la propriété background-size :
Exemple
html {
arrière-plan : url (img_man.jpg) centre sans répétition corrigé ;
taille de fond : couverture ;
}
Essayez-le vous-même »
Image du héros
Vous pouvez également utiliser différentes propriétés d’arrière-plan sur un
Exemple
.hero-image {
arrière-plan : url(img_man.jpg) centre sans répétition ;
taille de fond : couverture ;
hauteur : 500px ;
position : relative ;
}
Essayez-le vous-même »
Propriété CSS background-origin
Le CSS background-origin La propriété spécifie où l’image d’arrière-plan est positionnée.
La propriété prend trois valeurs différentes :
- border-box – l’image d’arrière-plan commence à partir du coin supérieur gauche de la bordure
- padding-box – (par défaut) l’image d’arrière-plan commence à partir du coin supérieur gauche du bord de remplissage
- content-box – l’image d’arrière-plan commence à partir du coin supérieur gauche du contenu
L’exemple suivant illustre la background-origin propriété:
Exemple
#Exemple 1 {
bordure : 10px noir uni ;
rembourrage : 35px ;
arrière-plan : url(img_flwr.gif);
répétition d’arrière-plan : pas de répétition ;
arrière-plan-origine : contenu-boîte ;
}
Essayez-le vous-même »
Propriété CSS background-clip
Le CSS background-clip La propriété spécifie la zone de peinture de l’arrière-plan.
La propriété prend trois valeurs différentes :
- border-box – (par défaut) l’arrière-plan est peint sur le bord extérieur de la bordure
- padding-box – l’arrière-plan est peint sur le bord extérieur du rembourrage
- content-box – l’arrière-plan est peint dans la zone de contenu
L’exemple suivant illustre la background-clip propriété:
Exemple
#Exemple 1 {
bordure : 10 px en pointillé noir ;
rembourrage : 35px ;
fond : jaune ;
clip d’arrière-plan : boîte de contenu ;
}
Essayez-le vous-même »
Propriétés d’arrière-plan avancées CSS
| Propriété | Description |
|---|---|
| arrière-plan | Une propriété abrégée pour définir toutes les propriétés d’arrière-plan dans une seule déclaration |
| clip d’arrière-plan | Spécifie la zone de peinture de l’arrière-plan |
| image de fond | Spécifie une ou plusieurs images d’arrière-plan pour un élément |
| background-origine | Spécifie où la ou les image(s) d’arrière-plan est/sont positionnée(s) |
| taille d’arrière-plan | Spécifie la taille des images d’arrière-plan |
#Arrièreplans #multiples #CSS