Como fazer um template para o Blogger III Background

Bom, agora que já entendemos o que são as variáveis e aprendemos a criar algumas novas, vamos aprender a dar estilo a Body, que é o corpo do nosso documento, da nossa página, e que contém todos os outros elementos.

Procure no código do seu blog de testes este trecho:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

A primeira propriedade que aparece para body é background, que é o fundo de um elemento html. Originalmente no template Mínima o valor é a variável $bgcolor. As propriedades background e seus valores possíveis são:

background-color: (cor do fundo)

Valores:

• código hexadecimal: #FFFFFF
• código rgb: rgb(255,235,0)
• nome da cor: red, green, white, etc
• transparente: transparent

background-image

• url(link da imagem)

background-repeat

• no-repeat
• repeat (repete por toda a página na horizontal e vertical)
• repeat-x (repete a imagem na horizontal)
• repeat-y (repete a imagem na vertical)

background-attachment (se a imagem rola ou não com a tela)

• fixed (imagem fixa na tela)
• scroll (imagem rola com a tela)

background-position: (posição da imagem na tela)

• x-% y-% (distância em porcentagem das margens do documento, horizontal e vertical)
• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right

A propriedade background pode ser aplicada a qualquer outro elemento html, além de body. Você pode determinar backgrounds diferentes para cada coluna, menu, títulos (sidebar, post) e footer.

Em nosso blog de testes vamos aplicar uma imagem de fundo em degradê, para testar.

Em seu editor de imagens (vou exemplificar no Photofiltre, aquele programa free que citei na primeira parte deste tutorial) crie uma imagem em branco de 50 de largura por 550 de altura e determine uma cor qualquer de fundo:

Clique na ferramenta gradiente: a primeira cor que escolhí foi a mesma que utilizei no fundo da imagem (#a3a3a3) e a segunda o branco:

Com a ferramenta conta-gotas, anote o valor da cor do final da imagem (bem do finalzinho mesmo, pois é esta cor que se repetira no background do seu template para além da imagem) A cor que eu anotei aqui foi #FEFEFE. Salve a imagem.

Agora vamos colocar esta imagem no background da nossa página.

1- Hospede a imagem no site TinyPic (ou qualquer outro de sua preferência). Tendo feito isso, copie o link fornecido (o último):

2- No código do template, você pode retirar a variável que está em background e colocar no lugar:

body {
background:#FEFEFE url(http://i33.tinypic.com/2ypd69z.jpg) repeat-x;

ou seja, a cor que eu obtí do final da imagem mais o link da imagem fornecido pelo TinyPic mais o valor repeat-x, pois desejo que a imagem que criei se repita horizontalmente. O resultado é este:

Note que rolando a página, a cor que continuará pelo background é a cor que colocamos antes do link da imagem e que continua o gradiente perfeitamente.

Posicionando uma imagem.

Vamos posicionar uma imagem no fundo. Vou usar esta imagem, tamanho 335x403:

Hospede a imagem, copie o link fornecido e volte ao código do template:

body {
background:#FEFEFE url(http://i34.tinypic.com/behova.jpg) no-repeat top left;

resultado:

body {
background:#FEFEFE url(http://i34.tinypic.com/behova.jpg) no-repeat top center;

resultado:

background:#FEFEFE url(http://i34.tinypic.com/behova.jpg) no-repeat bottom left;

resultado:

ou ainda é possível um posicionamento mais preciso:

body {
background:#FEFEFE url(http://i34.tinypic.com/behova.jpg) no-repeat 80% 60%;

resultado:

o que eu fiz foi posicionar a imagem à uma distância de 80% da margem esquerda e 60% do topo.

Como lição de casa :-) teste diversas maneiras de posicionar imagens para o background da sua página, utilizando todos os valores possíveis.