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
:
.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
<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, 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.).