No plano de fundo (background) do blog é possível alterarmos a cor ou colocarmos uma imagem, e para isso você deverá alterar o elemento “body“.
Lembrando que “BODY” é o “corpo do blog”.
Para alterar o seu plano de fundo, procure a tag ‘body’ no código HTML do Template.
Vá em “Modelo” >> “editar html” e procure pela tag “body” (use ctrl+f se preferir).
Verifique se no seu template existe definição para “background” no elemento “body”.
Por exemplo:
1. Alterar a cor do plano de fundo:
Se você quiser alterar somente a cor, troque o código hexadecimal da cor pela cor que você deseja (no exemplo acima a Cor é preta -> código hexadecimal #000000).
Veja tabela de cores.
Se quiser você também poderá aplicar um efeito gradiente ao plano de fundo(background).
2.Incluindo uma imagem como plano de fundo:
Se quiser colocar uma imagem como plano de fundo, acrescente a URL da imagem como no exemplo abaixo:
Se você incluiu uma imagem como plano de fundo do template é sempre bom que você informe como esta imagem deverá se apresentar, se ela deve repetir-se ou não.
Veja as maneiras que você pode estipular o comportamento da imagem:
repeat; – se você quiser que a imagem se repita
repeat-y; – a imagem repete na vertical
repeat-x; – a imagem repete na horizontal
no-repeat; – se você não quer que a imagem se repita
top; – Imagem somente no topo
bottom; – imagem somente abaixo
right; – imagem a direita
left; – imagem a esquerda
Se você estipular que a imagem não deve se repetir é necessário informar em que posição ela deverá aparecer.
Exemplo:
background: #000 url(url da imagem) no-repeat top left; -> neste exemplo a imagem não se repete e se apresenta no topo à esquerda.
Para que a imagem fique fixa na tela:
background-attachment: fixed;
Para que a imagem role com a tela:
background-attachment: scroll;
Outra possibilidade é combinar uma cor com imagem, neste caso, se a imagem for menor que a tela do usuário, onde não tiver imagem aparecerá a cor escolhida.
Exemplo:
background: #000000 url(http://url-da-imagem/) no-repeat bottom left; ->Fundo preto e imagem não repete e se apresenta somente abaixo e à esquerda.
O navegador Internet Explorer as vezes não consegue interpretar alguns códigos para imagens usados no blogspot.
Mas existe um truque que dá para corrigimos isso.
Se a sua imagem de fundo não apareceu no IE(ca), basta acrescentar um espaçamento duplo entre cada código.
Por exemplo:
Lembrando que “BODY” é o “corpo do blog”.
Para alterar o seu plano de fundo, procure a tag ‘body’ no código HTML do Template.
Vá em “Modelo” >> “editar html” e procure pela tag “body” (use ctrl+f se preferir).
Verifique se no seu template existe definição para “background” no elemento “body”.
Por exemplo:
body {background:#000000;}
1. Alterar a cor do plano de fundo:
Se você quiser alterar somente a cor, troque o código hexadecimal da cor pela cor que você deseja (no exemplo acima a Cor é preta -> código hexadecimal #000000).
Veja tabela de cores.
Se quiser você também poderá aplicar um efeito gradiente ao plano de fundo(background).
2.Incluindo uma imagem como plano de fundo:
Se quiser colocar uma imagem como plano de fundo, acrescente a URL da imagem como no exemplo abaixo:
background:#000000 url(url da imagem) repeat;
Estipulando o comportamento da imagem no background
Você pode optar para que a sua imagem escolhida para o fundo do template, seja fixa no topo do template, ou que ela se repita, ou que ela não se repita e fique fixa á direita, á esquerda, no topo, ou no bottom.Se você incluiu uma imagem como plano de fundo do template é sempre bom que você informe como esta imagem deverá se apresentar, se ela deve repetir-se ou não.
Veja as maneiras que você pode estipular o comportamento da imagem:
repeat; – se você quiser que a imagem se repita
repeat-y; – a imagem repete na vertical
repeat-x; – a imagem repete na horizontal
no-repeat; – se você não quer que a imagem se repita
top; – Imagem somente no topo
bottom; – imagem somente abaixo
right; – imagem a direita
left; – imagem a esquerda
Se você estipular que a imagem não deve se repetir é necessário informar em que posição ela deverá aparecer.
background: #000 url(url da imagem) no-repeat top left; -> neste exemplo a imagem não se repete e se apresenta no topo à esquerda.
Para que a imagem fique fixa na tela:
background-attachment: fixed;
Para que a imagem role com a tela:
background-attachment: scroll;
Outra possibilidade é combinar uma cor com imagem, neste caso, se a imagem for menor que a tela do usuário, onde não tiver imagem aparecerá a cor escolhida.
Exemplo:
background: #000000 url(http://url-da-imagem/) no-repeat bottom left; ->Fundo preto e imagem não repete e se apresenta somente abaixo e à esquerda.
O navegador Internet Explorer as vezes não consegue interpretar alguns códigos para imagens usados no blogspot.
Mas existe um truque que dá para corrigimos isso.
Se a sua imagem de fundo não apareceu no IE(ca), basta acrescentar um espaçamento duplo entre cada código.
Por exemplo:
background:++#000000++url(http://endereço-da-imagem)++no-repeat++bottom++left;No exemplo acima o símbolo + representa o espaçamento. Utilizei este simbolo apenas como forma de demonstração, não é para você incluir simbolo + no seu código ok? é apenas para substituir o + por “espaço”.
Categories:
Personalizando Layout:
