Múltiplas imagens de fundo com CSS

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.

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.


O resultado deste exemplo se pode ver em uma página à parte.


À 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.


Este exemplo se pode ver em uma página à parte.