Utiliser plusieurs arrière-plans
Vous pouvez appliquer plusieurs arrière-plans aux éléments. Ceux-ci sont superposés les uns sur les autres, le premier arrière-plan que vous fournissez étant au-dessus et le dernier arrière-plan listé étant en arrière-plan. Seul le dernier arrière-plan peut inclure une couleur de fond.
Les arrières plans multiples sont définis comme une liste séparée par des virgules, tels que background: background1, background2, …;. Cette syntaxe est acceptée à la fois par la propriété raccourcie background et par chacune de ses propriétés individuelles, à l'exception de background-color : background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.
Exemples
Dans cet exemple, trois arrière-plans sont superposés : le logo de Firefox, une image de bulles et un dégradé linéaire.
HTML
<div class="multi-bg-example"></div>
CSS
.multi-bg-example {
width: 100%;
height: 400px;
background-image:
url("firefox.png"), url("bubbles.png"),
linear-gradient(to right, rgb(30 75 115 / 100%), transparent);
background-repeat: no-repeat, no-repeat, no-repeat;
background-position:
bottom right,
left,
right;
}
Résultat
Comme vous pouvez le voir ici, le logo Firefox (listé en premier dans background-image) est au‑dessus, directement au‑dessus du graphique de bulles, suivi par le dégradé (listé en dernier) qui se trouve sous toutes les « images » précédentes. Chaque sous-propriété suivante (background-repeat et background-position) s'applique aux arrière-plans correspondants. Ainsi, la première valeur listée pour background-repeat s'applique au premier arrière-plan (le plus en avant), et ainsi de suite.
Répéter les valeurs pour les arrière-plans multiples
Lors de l'utilisation d'arrière-plans multiples, si une propriété liée à l'arrière-plan reçoit moins de valeurs séparées par des virgules que le nombre de calques d'arrière-plan, l'agent utilisateur répète la liste des valeurs jusqu'à ce qu'il y en ait suffisamment pour tous les calques.
Par exemple :
.element {
background-image: url(a.png), url(b.png), url(c.png);
background-position: left top;
}
Cela équivaut à :
.element {
background-position:
left top,
left top,
left top;
}