Tableless

Busca Menu

Múltiplos backgrounds com CSS

Seja o primeiro a comentar por

Uma das features mais esperadas por mim é sem dúvida a possibilidade de podermos definir múltiplos backgrounds via CSS. Chega de elementos extras e gambiarras. No CSS3 a propriedade background ganha várias funções, dentro elas a possibilidade de definirmos várias imagens como background em um único elemento.

A sintaxe é muito simples. Na verdade, é idêntica a sintaxe existente. Segue abaixo:

[cc lang=”css”]
div {
width:600px;
height:500px;
border:1px solid black;
background:
url(gradiente-top.png) top left repeat-X,
url(gradiente-baixo.png) bottom left repeat-X,
url(gradiente-esquerda.png) top left repeat-Y,
url(gradiente-direita.png) top right repeat-Y;
}
[/cc]

Veja que basta definirmos diversas vezes a propriedade URL com as imagens que escolher e pronto. Os atributos de posição e repetição continuam iguais!
É tão simples que dispensa grandes explicações. No exemplo acima usei 4 imagens em gradiente transparente. Duas para os lados e as outras duas para o topo e baixo.

Testando com o HTML

Publicado no dia