4.1 Principes de base
CSS te permet d'utiliser plusieurs images de fond dans un seul élément, ce qui ouvre un large éventail de possibilités
pour créer des effets visuels complexes et intéressants. Grâce à la propriété background-image et les propriétés associées,
tu peux définir plusieurs couches d'images de fond, en contrôlant leur ordre, position et autres caractéristiques.
Syntaxe
Pour définir plusieurs images de fond, on utilise une syntaxe où les différentes images sont listées séparées par des virgules :
element {
background-image: imageUrl1, imageUrl2, imageUrl3;
}
Propriétés pour configurer chaque niveau
En plus de background-image, les propriétés suivantes sont utilisées pour configurer chaque couche d'image de fond,
qui prennent également en charge des valeurs multiples séparées par des virgules :
background-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachment
Ordre des couches
Les images sont empilées en couches dans l'ordre où elles sont listées, où la première image est la plus proche de l'utilisateur, et la dernière est la plus proche du fond de l'élément.
4.2 Superposition d'images
Simple superposition d'images.
Exemple d'utilisation :
.multi-bg {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, top left;
background-repeat: no-repeat, no-repeat;
border: 1px solid #000;
}
<body>
<div class="multi-bg">Fond multicouche</div>
</body>
Explication du code :
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');: définit deux images de fondbackground-position: center, top left;: centre la première image et place la seconde image en haut à gauchebackground-repeat: no-repeat, no-repeat;: désactive la répétition pour les deux images
4.3 Utilisation de plusieurs images
Utilisation de plusieurs images de fond avec des tailles différentes.
Exemple d'utilisation :
.multi-bg-sizes {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, bottom right;
background-repeat: no-repeat, no-repeat;
background-size: 50% 50%, 30% 30%;
border: 1px solid #000;
}
<body>
<div class="multi-bg-sizes">Fond multicouche avec tailles</div>
</body>
Explication du code :
background-size: 50% 50%, 30% 30%;: redimensionne la première image à 50% de la largeur et de la hauteur de l'élément, et la seconde image à 30% de la largeur et de la hauteur de l'élément
4.4 Images transparentes
Superposition d'images avec transparence.
Exemple d'utilisation :
.multi-bg-opacity {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-size: cover, 50%;
border: 1px solid #000;
position: relative;
}
.multi-bg-opacity::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
<body>
<div class="multi-bg-opacity">Fond multicouche avec transparence</div>
</body>
Explication du code :
background-size: cover, 50%;: redimensionne la première image pour couvrir tout l'élément, et la seconde image à 50% de la taille de l'élément::before: pseudo-élément ajoute une couche noire semi-transparente au-dessus des images de fond
4.5 Découpe du fond
Utilisation d'autres propriétés avec plusieurs images de fond.
background-origin et background-clip
Ces propriétés contrôlent la zone où l'image de fond est affichée et la zone de découpe du fond.
Exemple d'utilisation :
.multi-bg-origin-clip {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-origin: padding-box, content-box;
background-clip: border-box, padding-box;
border: 10px solid #000;
padding: 20px;
}
<body>
<div class="multi-bg-origin-clip">Fond multicouche avec background-origin et background-clip</div>
</body>
Explication du code :
background-origin: padding-box, content-box;: la première image commence à partir du bord intérieur du padding, la deuxième image à partir du contenu de l'élémentbackground-clip: border-box, padding-box;: la première image est découpée au bord extérieur de la bordure, la deuxième image - au bord intérieur du padding
GO TO FULL VERSION