Dividir plano de fundo da página - CSS 3

Nesse post usaremos uma técnica de CSS3 chamada multiplos backgroundsRef[2], que permite definir mais de uma imagem como plano de fundo.

-Nota 1: Para essa técnica são necessários conhecimentos básicos de CSS.

-Nota 2: Apesar deste tutorial mostrar especificamente como dividir a página do blogger, essa técnica pode ser usada para dividir qualquer background que esteja em CSS.

Mãos à obra.

Acesse Painel de Controle > Design > Editar Html e localize algo semelhante a isso:

/* Créditos: 10calco.blogspot.com */
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Altere a parte em negrito pelo seguinte código:

background-color:$bgcolor;
background-image: url(Plano de fundo 01), url(Plano defundo 02);
background-position: left top, left bottom;
background-origin: border-box, border-box;
background-repeat: no-repeat, repeat-x;
background-size: 200px 50%, 100px 100px;
-o-background-size: 200px 50%, 100px 100px;
-moz-background-size: 200px 50%, 100px 100px;
-webkit-background-size: 200px 50%, 100px 100px;
background-attachment:fixed;

Substituir "Plano de Fundo" pelo endereço das imagens a serem utilizadas.
Esse é um código comum para background, porém note que há dois valores separados por vírgula em cada propriedade, cada um deles define sua respectiva imagem. Se quiser utilizar mais imagens basta separar os valores por vírgulas.
O background-size define o tamanho de cada imagem, para mais informações sobre essa propriedade veja: Redimensionar imagem com CSS
No mais é CSS básico. Divirtam-se.

Meu exemplo ficou assim:

E o código usado:

background-color:$bgcolor;
background-image: url(http://lh5.ggpht.com/_gkCCEPUJN58/TFGLOGhDgTI/AAAAAAAABJ4/27IEt3o-a54/s640/lua-1919.jpg), url(http://lh5.ggpht.com/_gkCCEPUJN58/S7Hpx44wlaI/AAAAAAAAAag/zCmT7pYZlGQ/s640/chuva.jpg);
background-position: left top, left bottom;
background-origin: border-box, border-box;
background-repeat: no-repeat, repeat-x;
background-size: 100% 50%, 100px 50px;
-o-background-size: 100% 50%, 100px 50px;
-moz-background-size: 100% 50%, 100px 50px;
-webkit-background-size: 100% 50%, 100px 50px;
background-attachment:fixed/* Créditos: 10calco.blogspot.com */

Azul= Imagem de cima com 100% de largura, ocupando 50% da altura da página e não se repete (no-repeat).
Vermelho= Imagem do rodapé com 100px de largura, 50px de altura e repetindo horizontalmente (repeat-x).
A propriedade background-origin como o próprio nome diz, define a origem do posicionamento do background, que no caso é a borda do elemento (border-box). Ver Ref[3]
Ambas as imagens estão com position=fixed, ou seja, estão fixas na página mesmo com a rolagem da mesma, o que dá um efeito interessante ao fundo.
A cor do background é preta para esconder o espaço entre as duas imagens.


Links recomendados:

• Ref[1]Guia W3C - Background
• Ref[2]Técnica de Multiplos Backgrounds - CSS3 Info
• Ref[3]Criarweb - Background-origin