Header Vanessa S.
Modificando Plano de Fundo – Background
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:
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;
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:
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”.
Clau, há alguma possibilidade de redimensionamento automático da imagem em diferentes navegadores e/ou monitores? Noto que a imagem de fundo de meu blog (setimasala.blogspot.com) tem a imagem variada conforme o monitor ou navegador.
Obrigadaço de antemão!
Meu blog não tem esse código:
body {
background:#000000 ;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Como faço para colocar o: background:#000000 url(url da imagem) repeat;
Não estou conseguindo mudar o fundo pelo Design do Modelo, fica dando erro interno :S
Aonde que bota o : background:#000000 url(url da imagem) repeat; ??
Brigada me ajudou muiito (:
quero colocar uma imagem no plano de fundo do roda pé.Como se faz?
grato desde já!!!
hm nee~
queria saber como colocar duas imagens no background~
uma no topo do blog, e outra no fim da página~~
tem como fazer isso? D=
se puder explicar, fico muito muito agradecida *-*
e ah~~ seu blog é ótimo *-* quase todos lays que faço, é usando dicas daqui *-* muito útil <3
desde já, obrigada~
Olá Clau, sou iniciante em criação de blogs. Gostaria de saber como posso criar um modelo personalizado como esse do seu blog. Quais ferramentas posso usar ? Por onde começo ?
Clau eu tentei usar a opção de imagem do fundo que rola junto com a tela e não deu certo, eu uso um template do designer de modelo do blogger … coloquei assim:
background: #0000CD url(http://mvdoqmnvomnqvw.webs.com/Imagem1.png) no-repeat ;
background-attachment: scroll;
coloquei o codigo para aparecer a imagem e na linha debaixo o codigo da imagem fixa, ta certo isso ?
Ajuda please so falta isso pro meu template fica bom !
Wolf Art's
Lamento, mas desconheço essa opção.
clau, estou querendo colocar imagens que quando carregar a pagina o fundo muda a imagem.
poderia me ajudar?
siemprecreimoscabj
Bom, 1º que vc está pegando o endereço da imagem de forma errada. Vc tem que clicar na imagem do album, abri-la e pegar o endereço da imagem com ela aberta.
2º: vc estipulou que a imagem não deve se repetir(no-repeat) e deverá aparecer apenas na parte final do blog (bottom) e do lado esquerdo(left).
Dá uma relida no post no item sobre comportamento da imagem.
ja tentei colocar fundo mas nao consigo por favor mi ajude
background: #000000
url(http://http://picasaweb.google.com/lamusicaric/JRRiquelmeApertura2010#5537257391796867362/) no-repeat bottom left;
aonde esta o erro?
andrade.lcaj
Em "body" não precisa estipular largura,pq ela já se amplia automaticamente, mas na sidebar, é melhor vc estipular uma largura exata sim.
Boa noite Clau, antes de mais nada parabéns pelo Blog que considero um dos mais completos em dicas e tutoriais e agradeço a sua boa vontade de dividir conosco o seu conhecimento. Aprendi muito com o que você escreveu. O meu blog (www.ortopediainfantil.net.br) tem uma boa aparência graças as muitas dicas que você postou.
Tenho uma dúvida: é possível deixar no auto (automático) as larguras do 'corpo e barras laterais' do template para que não apareca barra de rolagem horizontal conforme o tamanho da tela do pc utilizada para não precisar deixar com tamanho de largura em torno de 830 a 900px, obrigado,
Luiz
clau,quando colocamos uma imagem de fundo,ela se representa em forma de mosaico,como podemos retirar este efeito?