Leonardo Moreira

Resolvi criar esse post para explicar como usar múltiplos backgrounds, como esse aqui do Blog, as listrinhas roxas. Então vou usar o mesmo efeito para o exemplo, nada difícil ou misterioso, sigam-me

Nosso código HTML, dispensa explicações:

Agora o que interessa, CSS3:

body {
      background: url(images/bg-01.png) no-repeat 0 0,
                  url(images/bg-02.png) no-repeat 25% 0,
                  url(images/bg-03.png) no-repeat 50% 0,
                  url(images/bg-04.png) no-repeat 75% 0,
                  url(images/bg-05.png) no-repeat 100% 0,
                  url(images/bg-06.png) no-repeat 0 bottom,
                  #f3f3f3;

                  -webkit-background-size: 20.1% 10px, 20.1% 10px, 20.1% 10px, 20.1% 10px, 20.1% 10px, 100% 20px;
                  -moz-background-size: 20.1% 10px, 20.1% 10px, 20.1% 10px, 20.1% 10px, 20.1% 10px, 100% 20px;
                  background-size: 20.1% 10px, 20.1% 10px, 20.1% 10px, 20.1% 10px, 20.1% 10px, 100% 20px;
}

div.index {
      width: 800px;
      margin: 0 auto;
}

Explicando, os 5 primeiros backgrounds da propriedade body formam a listra, está bem claro, a position de cada um varia em 25% e a altura que vou usar é “zero” para todas. O sexto argumento é referente ao rodapé, a imagem bg-06.png vai ficar alinhada ao rodapé (bottom) e irá começar na posição zero, lembrando que é sempre da esquerda para a direita. Enfim temos o sétimo argumento, #f3f3f3; é o background geral que vou deixar no meu site, cuidado com as vírgulas para separar os argumentos e o ponto e vírgula no final blz?

Agora embaixo, temos o size de todos os argumentos usados anteriormente, na mesma ordem dos argumentos do background vamos definir o tamanho de cada imagem. Do background 1 ao 5, vamos usar 20,1% 10px , porque? São eles que formam a listra colorida, então eu quero que cada um tenha 20% de tamanho – 100/5, já que são 5 imagens, se fosse 4, seria 25% ok? – e quero que elas tenham 10px de altura. Depois eu tenho 100% 20px que é meu rodapé,quero que ele ocupe 100% da tela e tenha 20px de altura. Perfeito? Não teremos o sétimo argumento porque ele não tem tamanho definido, é o nosso fundo cinza.

Facinho né? O resultado final você vê em: http://www.leonardomoreira.com.br/artigos/css3-bg/

Espero que tenha tirado todas suas dúvidas em relação aos múltiplos backgrounds com CSS3.