Múltiplas imagens de fundo com CSS

[helldanger1]

Como conseguir que um elemento da página tenha várias imagens de fundo ao mesmo tempo, com CSS básico e com características de CSS 3.
Por Miguel Angel Alvarez - Tradução de JML



Com o atributo background-image podemos conseguir que um elemento da página tenha um fundo de imagem. Isto devemos saber, visto que é algo básico das folhas de estilo em cascata (CSS). Porém, neste artigo de CriarWeb.com vamos mostrar como poderíamos conseguir que um elemento da web tivesse várias imagens de fundo ao mesmo tempo. Colocar várias imagens de fundo a um elemento à princípio não se pode com CSS, por isso mostraremos como fazê-lo com uma simples técnica alternativa. Mas também veremos que em SS 3 existe a possibilidade de configurar vários fundos ao mesmo tempo em um elemento, com uma declaração de background-image e sem a necessidade de realizar nenhum tipo de técnica alternativa.

Referência: Para conhecer um pouco da recente especificação de CSS3 seria bom ler o artigo Introdução a CSS 3.
Em CSS normal (CSS 1), como dissemos, podemos colocar um único fundo a um elemento da página. Isto é algo suportado por todos os navegadores. Como não podemos colocar mais de 1 fundo por elemento, para colocar vários fundos ao mesmo tempo, temos que utilizar vários elementos. A cada elemento lhe colocaremos um único fundo, porém ao se mostrar os elementos no mesmo espaço, conseguiremos o efeito desejado de ter vários fundos de imagem ao mesmo tempo.

Em nosso caso, vamos utilizar várias camadas DIV aninhadas e cada uma terá seu fundo de imagem.

 

[helldanger1]

O código HTML que utilizaríamos para aninhar várias camadas DIV seria como segue:

<div id="fundo1">
<div id="fundo2">
<div id="fundo3">
conteúdo do elemento que vai ter 3 fundos de imagem distintos
...
</div>
</div>
</div>

Como se pode ver, podemos aninhar camadas DIV e cada uma terá um identificador, ou se preferirmos uma classe, para atribuir estilos por CSS. Ao estar aninhados, todos os elementos DIV se mostrarão um em cima do outro.

Agora vejamos o código CSS para lhe dar fundos a cada um destes elementos DIV:

<style type="text/css">
#fundo1{
background-image: url(fundo1.gif);
width: 300px;
}
#fundo2{
background-image: url(fundo2.png);
background-repeat: no-repeat;
background-position: bottom right;
}
#fundo3{
background-image: url(fundo3.png);
background-repeat: no-repeat;
background-position: center;
}
</style>

Os fundos irão se sobrepor uns aos outros, sendo o fondo1 o que será visto mais abaixo e o fundo3 o que se verá mais acima.

 

[helldanger1]

À princípio todos os navegadores visualizarão perfeitamente os fundos, porém como utilizei imagens transparentes em formato PNG e Internet Explorer 6 tem problemas com a transparência dos arquivos PNG, podemos encontrar algum defeito, mas os fundos dos elementos DIV se verão.


Colocar vários fundos de imagem a um elemento com CSS 3
Uma das novas características de CSS 3 consiste na possibilidade de declarar vários fundos de imagem a um elemento da página. O que antes vimos que é possível, criando vários elementos aninhados e colocando um fundo em cada um, se pode fazer em CSS 3 com um só elemento, ao que aplicaremos vários fundos distintos.

O HTML do exemplo de várias imagens de fundo seria o seguinte:

<div id="fundos">
texto de um único elemento
...
</div>

Agora vejamos o CSS 3 válido para este exemplo:

<style type="text/css">
#fundos{
background: url(fundo3.png) bottom right no-repeat,
url(fondo2.png) center no-repeat,
url(fundo1.gif) center repeat;
width: 300px;
}
</style>

Só cabe comentar que as diferentes imagens de fundo se têm que escrever na declaração CSS separadas por vírgulas. Ademais, as imagens que declaramos se vão colocando de modo que a primeira aparece sobre as seguintes. Sendo assim, nesta declaração, fundo1.gif, que está colocada como último fundo, é a que aparece atrás de tudo.

De momento, a possibilidade de incluir vários fundos de imagem a um elemento só está disponível no navegador Safari, porém esperemos que em breve outros navegadores vão incorporando esta funcionalidade de CSS 3.