Avec CSS3, on peut appliquer plusieurs arrière-plans à des éléments. Ceux-ci seront empilés les uns sur les autres (le premier de la liste étant le plus « haut » dans la pile et le dernier étant le plus « bas »à. Seul le dernier arrière-plan peut décrire une couleur.
Pour cela, il suffit simplement d'utiliser une liste de valeur avec background :
.maClasse {
background: background1, background 2, ..., backgroundN;
}
Cela fonctionne aussi bien avec la propriété raccourcie background qu'avec les propriétés détaillées, exception faite de background-color. On peut donc utiliser une liste de valeurs, chacune pour un arrière-plan différent, pour les propriétés suivantes : background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.
Exemple
Dans cet exemple, on cumule trois arrière-plans : le logo de Firefox, un dégradé linéaire (cf. linear-gradient) et une image de bulles.
CSS
.exemple_multi_ar {
width: 100%;
height: 400px;
background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: bottom right, left, right;
background: -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
}
HTML
<div class="exemple_multi_ar"></div>
Résultat
Comme on peut le voir ici, le logo qui est le premier élément de la liste apparaît en dessus, il est suivi par le dégradé puis par les bulles. Chacune des propriétés (background-repeat et background-position) s'applique aux arrière-plans correspondant (la première valeur de la liste pour le premier arrière-plan, etc.).