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 la
background-imageproprié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
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
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 backgroundpropriété abrégée.
L'exemple suivant utilise la backgroundpropriété abrégée (même résultat que l'exemple ci-dessus) :
Exemple
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
}
Taille d'arrière-plan CSS
La propriété CSS background-sizevous 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) :
Remerciez-le pour la douleur
La douleur elle-même est l'amour
C'est pourquoi c'est pour le moindre à venir, que notre pratique normale supporte pour profiter des conséquences
Voici le code :
Exemple
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Les deux autres valeurs possibles pour background-sizesont contain
et cover.
Le containmot 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 mot- coverclé redimensionne l'image d'arrière-plan afin 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 containet cover:
Exemple
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Définir les tailles de plusieurs images d'arrière-plan
La background-sizeproprié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
#example1 {
background: url(img_tree.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
}
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 <html> (l'élément <html> 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 {
background: url(img_man.jpg) no-repeat
center fixed;
background-size: cover;
}
Image du héros
Vous pouvez également utiliser différentes propriétés d'arrière-plan sur un <div> pour créer une image principale (une grande image avec du texte) et la placer où vous le souhaitez.
Exemple
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position:
relative;
}
Propriété CSS background-origin
La propriété CSS background-originspé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-originpropriété :
Exemple
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
Propriété CSS background-clip
La propriété CSS background-clipspé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-clippropriété :
Exemple
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
Propriétés d'arrière-plan avancées CSS
| Property | Description |
|---|---|
| background | A shorthand property for setting all the background properties in one declaration |
| background-clip | Specifies the painting area of the background |
| background-image | Specifies one or more background images for an element |
| background-origin | Specifies where the background image(s) is/are positioned |
| background-size | Specifies the size of the background image(s) |