Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1501102909
Vida do cache: 1501146109
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Header

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 elementobody“.
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”.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

15 Comentários

  1. Luciano Vieira Francisco disse:

    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!

  2. Fraan Simas disse:

    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

  3. Julia *-* disse:

    Aonde que bota o : background:#000000 url(url da imagem) repeat; ??

  4. jackie Zanini disse:

    Brigada me ajudou muiito (:

  5. Washigton Luiz Paranaguá disse:

    quero colocar uma imagem no plano de fundo do roda pé.Como se faz?
    grato desde já!!!

  6. ?? disse:

    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~

  7. cjtorres disse:

    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 ?

  8. Rickzinhocps disse:

    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 !

  9. .:: Clau ::. disse:

    Wolf Art's
    Lamento, mas desconheço essa opção.

  10. Wolf Art's disse:

    clau, estou querendo colocar imagens que quando carregar a pagina o fundo muda a imagem.

    poderia me ajudar?

  11. .:: Clau ::. disse:

    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.

  12. siemprecreimoscabj disse:

    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?

  13. .:: Clau ::. disse:

    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.

  14. andrade.lcaj disse:

    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

  15. Lucas disse:

    clau,quando colocamos uma imagem de fundo,ela se representa em forma de mosaico,como podemos retirar este efeito?

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.