Multiple backgrounds

Com CSS3, você pode aplicar aos elementos multiplos planos de fundo. Estes ficam em camadas empilhadas uma acima da outra onde o o primeiro fundo dado será desenhado no topo e apenas o último fundo da lista poderá definir uma cor sólida de fundo.

Especificar planos de fundo múltplos é fácil:

css

.minhaClasse {
  background: fundo1, fundo2, ..., fundoN;
}

Você pode fazer isso com a propriedade reduzida background e também com as propriedade individuais, com a excessão de background-color. Isto é, as seguintes propriedades de plano de fundo podem ser especificadas com uma lista, uma por fundo: background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.

Exemplo

Neste exemplo, três planos de fundos estão empilhados: o logo do Firefox, um degradê linear, e uma imagem com flores:

css

.multi_bg_example {
  background:
    url(http://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(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
  background-repeat: no-repeat, no-repeat, repeat;
  background-position:
    bottom right,
    left,
    right;
}

Como pode ver, o logo do firefox (listado primeiro) está no topo, seguido do gradiente que está uma camada acima do fundo florido. Cada uma das sub-propriedade subsequente, (background-repeat e background-position) se aplicam aos fundos correspondentes. Então o primeiro valor para background-repeat se aplica ao primeiro plano de fundo (o mais da frente), e assim por adiante.

Veja também

Usando degradês