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:
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:
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:
Continuar lendo ... "Dividir plano de fundo da página - CSS 3"
-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 */Altere a parte em negrito pelo seguinte código:
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Substituir "Plano de Fundo" pelo endereço das imagens a serem utilizadas.
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;
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:
Azul= Imagem de cima com 100% de largura, ocupando 50% da altura da página e não se repete (no-repeat).
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 */
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:
