CSS3 – Propriedade background

A propriedade background terá suporte a múltiplas imagens. Ou seja, você poderá colocar várias imagens de background em um elemento. Conseqüentemente a separação por vírgulas das propriedades aumentará um bocado. Você terá códigos do tipo: div {background-image: url(tl.png), url(tr.png), url(tr2.png);} Se você for definir tudo numa mesma linha e com o resto das propriedades, ficaria mais ou menos assim: div { background: url(t1.png) no-repeat left top, url(tr.png) no-repeat center center, url(tr2.

por Diego Eis 24/07/2006 Comentários

A propriedade background terá suporte a múltiplas imagens. Ou seja, você poderá colocar várias imagens de background em um elemento. Conseqüentemente a separação por vírgulas das propriedades aumentará um bocado. Você terá códigos do tipo:

div {background-image: url(tl.png), url(tr.png), url(tr2.png);}

Se você for definir tudo numa mesma linha e com o resto das propriedades, ficaria mais ou menos assim:

div { 
    background: url(t1.png) no-repeat left top, 
    url(tr.png) no-repeat center center, 
    url(tr2.png) no-repeat center top;
}

Outra nova propriedade que surge é a background-origin. Ela determina como o background-position será calculado. Suponha que você tenha um elemento com borda e padding. Se o background-origin tiver o valor border, por exemplo, o background será desenhado tomando como referência o ponto ‘0 0’ do limite da borda. Se o valor for padding, então a referência será tomada como o ponto ‘0 0’ do limite do padding. Interessante, não é?

Você também poderá definir uma dimensão para a imagem de background. Veja o código de exemplo:

div {
    background-size: 15px 30px;
    background-image: url(tile.png);
}

Neste código, definimos que a imagem de background terá 15px de largura por 30px de altura.

Para fazer a imagem cobrir todo o background do elemento, utilize o valor cover no background-size. Dessa forma se a imagem for menor do que o elemento, a imagem vai se redimensionar pelo elemento inteiro.

Para mais informações interessantes sobre a propriedade Background no CSS3, visite o site do W3C, onde há mais detalhes e comentários dos editores: http://www.w3.org/Style/CSS/current-work#background.