Utiliser plusieurs arrière-plans

Avec CSS, 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 d'utiliser une liste de valeur avec background :

css
.maClasse {
  background: background1, background2, ..., 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.

Exemples

Dans cet exemple, on cumule trois arrière-plans : le logo de Firefox, une image de bulles et un dégradé linéaire (cf. linear-gradient).

HTML

html
<div class="multi-bg-example"></div>

CSS

css
.multi-bg-example {
  width: 100%;
  height: 400px;
  background-image: url(firefox.png), url(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;
}

Résultat

Comme on peut le voir ici, le logo qui est le premier élément de la liste apparaît en haut, il est suivi par les bulles puis par le dégradé. 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.).

Voir aussi