Múltiplos Backgrounds com CSS3

Resolvi criar esse artigo 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:

<div class="index"><img src="images/index.png" alt=""></div>

Agora o que interessa, CSS3:

body {<br />      background: url(images/bg-01.png) no-repeat 0 0,<br />                  url(images/bg-02.png) no-repeat 25% 0,<br />                  url(images/bg-03.png) no-repeat 50% 0,<br />                  url(images/bg-04.png) no-repeat 75% 0,<br />                  url(images/bg-05.png) no-repeat 100% 0,<br />                  url(images/bg-06.png) no-repeat 0 bottom,<br />                  #f3f3f3;<br /><br />                  -webkit-background-size: 20.1% 10px, 20.1% 10px, 20.1% 10px, 20.1% 10px, 20.1% 10px, 100% 20px;<br />                  -moz-background-size: 20.1% 10px, 20.1% 10px, 20.1% 10px, 20.1% 10px, 20.1% 10px, 100% 20px;<br />                  background-size: 20.1% 10px, 20.1% 10px, 20.1% 10px, 20.1% 10px, 20.1% 10px, 100% 20px;<br />}<br /><br />div.index {<br />      width: 800px;<br />      margin: 0 auto;<br />}

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.