Bem gente, eu resolvi postar sobre este tema, porque foi um achado pra mim hoje. Eu estava tentado colocar duas imagens no background de um blog e como não sou muito crack nisso fiz uma pesquisa no google para saber como fazer, eu passei práticamente meu domingo inteiro pesquisando sobre isso e não achei nada, agora a noite quando fui fazer uma última pesquisa achei um site maravilhoso que postava exatamente o que eu queria tudo bem explicadinho, amei o resultado e foi tudo muito simples, como foi tão difícil achar, resolvir passar pra quem tem a mesma dúvida.
PLANO DE FUNDO DO BLOG
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 "design" >> "editar html" e procure pela tag "body" (use ctrl+f se preferir):
body {background:#000000 ;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;}
ALTERAR 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).
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;
Você pode estipular o comportamento da imagem do background da maneira que você achar melhor.
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.
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:
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".
Por .:: Clau ::.
- Follow Us on Twitter!
- "Join Us on Facebook!
- RSS
Contact