Múltiplos Backgrounds

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.

Leave a Reply