Com CSS3 pode aplicar múltiplos fundos aos elementos. Estes são colocados um sobre o outro, com o primeiro fundo fornecido no topo e o último fundo listado por trás. Só o último fundo pode incluir uma cor de fundo:
É fácil especificar múltiplos fundos:
.myclass {
background: background1, background 2, ..., backgroundN;
}
Você pode fazer isto com o apanhado da propriedade background e das sub-propriedades desta: background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.
Exemplo
Neste exemplo, três fundos são empilhados: a logo do Firefox, um gradiente linear (en) e uma imagem com flores:
.multi_bg_example {
background: url(https://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
-moz-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)),
url(https://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
background-repeat: no-repeat, no-repeat, repeat;
background-position: bottom right, left, right;
}
| Foto | Demonstração ao vivo |
 |
Como pode ver aqui, o logótipo do Firefox (listado primeiro) está no topo, seguida pelo gradiente, que está uma camada acima do fundo florido. Cada sub-propriedade (background-repeat e background-position) subsequentes aplicam-se aos fundos correspondentes. Dessa forma, o primeiro valor listado para background-repeat aplica-se ao primeiro fundo (mais a frente), e assim por diante.