Com a chegada do CSS3, um dos grandes desejos dos designers foi satisfeito: a possibilidade de inclusão de várias imagens de background em elementos sem a necessidade de mudanças na forma como você escreve o seu CSS.
Com alguns caracteres a mais, você tem o efeito da imagem abaixo, onde o ambiente é uma imagem e o meme face é outra imagem.
O suporte à essa funcionalidade contempla, praticamente, todos os principais navegadores modernos. O Google Chrome oferece suporte à múltiplos backgrounds desde a versão 10, o Firefox desde a versão 3.6, o Safari desde a versão 1.3, o Opera desde a versão 10.50 (ainda na engine Presto) e o IE desde a versão 9.0 (que novidade).
Você consegue repetir a renderização da imagem acima com o seguinte código:
#trabalho {
background: url(../img/ok.png) right bottom no-repeat, url(../img/trabalho.jpg) left top no-repeat;
}
Viu como é simples ? Basta você separar os atributos por vírgula. Mas você precisa prestar atenção no seguinte detalhe: as imagens são exibidas do primeiro plano para o plano de fundo. No exemplo acima, o arquivo ok.png é o meme face e está visível pois está declarado primeiro.
Caso você ache o código acima confuso e de manutenção complicada você pode ‘distribuir’ os atributos pelas propriedades de background.
#trabalho {
background-image: url(../img/ok.png), url(../img/trabalho.jpg);
background-position: right bottom, left top;
background-repeat: no-repeat;
}
Você pode perceber que na propriedade background-repeat eu informei apenas 1 vez o atributo no-repeat. Caso não seja declarado, o navegador repetirá o último atributo para o restante das imagens. Para o caso de você exceder o número de atributos, os excedentes serão ignorados pelo seu navegador.