Backgrounds – Parte 4: Múltiplas Imagens de Background

Múltiplas Imagens de Background

Hoje vamos aprender uma das novidades em CSS3 que mais me agradou, a possibilidade de usar múltiplas backgrounds. Ela pode nos proporcionar uma grande economia de tempo, permitindo obter efeitos que antes exigiam mais de uma div para se atingir. A primeira imagem declarada é posicionada na parte superior do elemento, com imagens posteriores. Um exemplo de utilização da propriedade é:

#multiplas_backgrounds{
width: 300px;
height: 100px;
background: url(http://www.css3.x4ids.com.br/imagens/ubuntu-tutoriais-css3.png) no-repeat top right,
url(http://www.css3.x4ids.com.br/imagens/counterstrikeCSSpng.png) repeat-x bottom,
url(http://www.css3.x4ids.com.br/imagens/css3-is-great-sombra.png);
}

Funciona no: ie2 Backgrounds – Parte 4: Múltiplas Imagens de Background firefox Backgrounds – Parte 4: Múltiplas Imagens de Background chrome Backgrounds – Parte 4: Múltiplas Imagens de Background safari Backgrounds – Parte 4: Múltiplas Imagens de Background opera Backgrounds – Parte 4: Múltiplas Imagens de Background

Agora vamos entender o que fizemos.

Defini primeiro uma largura e uma altura para a nossa div. O código é muito parecido com o que já conhecemos do CSS2, exceto as vírgulas que são usadas para separar as imagens. Podemos assim colocar várias imagens de fundo e definir sua localização através da propriedade background-position já conhecida do CSS2 que pode ser incerida log após declarada a “url” da imagem. Para ajudar vai aqui os valores válidos para o background-position:

x-pos y-pos
x-% y-%
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

Vamos ver mais um exemplo:

#multiplas_backgrounds{
width: 500px;
height: 365px;
border: 2px solid #CCC;
background: url(http://www.css3.x4ids.com.br/imagens/sol-tutoriais-css3.png) no-repeat top right,
url(http://www.css3.x4ids.com.br/imagens/berserker-tutoriais-css3.png) no-repeat bottom left,
url(http://www.css3.x4ids.com.br/imagens/comic-tutoriais-css3.png) no-repeat bottom right,
url(http://www.css3.x4ids.com.br/imagens/ceu-tutoriais-css3.jpg) repeat-x bottom;
url(http://www.css3.x4ids.com.br/imagens/grama-tutoriais-css3.jpg) repeat-x bottom;
}

Agora vamos ver como posicionamos cada imagem:

: sol-tutoriais-css3.png posicionada com top e right.

: berserker-tutoriais-css3.png posicionada com bottom e left.

: comic-tutoriais-css3.png posicionada com bottom e right.

: ceu-tutoriais-css3.jpg posicionada com top e repete na horizontal.

: grama-tutoriais-css3.jpg posicionada com bottom e repete na horizontal.

Regras no posionamento:

O background que for declarado primeiro será o de nível superior e, acima de todos os outros Backgrounds.
Por exemplo, o sol (a imagem de fundo em primeiro lugar) será superior a todos os outros, enquanto a grama (imagem de fundo último da lista) será debaixo de todas as outras.

Espero que possamos utilizar com muita criatividade este novo método de posicionamento CSS3 que nos permite criar backgrounds vários níveis e mantê-los organizados.

Posts Relacionados: