17/11/2008

Imagem para fundo do blog

Quando temos que fazer uma imagem para usar como textura no fundo do blog geralmente enfrentamos muitos problemas, pois é difícil fazer uma imagem que encaixe perfeitamente. Logo abaixo você tem imagens para usar como plano de fundo no seu site, você apenas precisa salvar e hospedar em algum lugar, sugerimos o http://imageshack.us








No site All Free Backgrounds e Free Backgrounds você encontra muitas outras imagens de fundo, e o procedimento é o mesmo, salvar e hospedar a imagem e depois você entra na pagina editar html do seu blog e coloca a linha de código background-image: url(endereço da imagem); junto com :
body{................
...........
..........}
E já está pronto, se você quiser testar essas imagens antes de colocar no seu blog copie esse código:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {background-image: url(fundo4.gif);
}
-->
</style></head>
<body>
</body>
</html>



Cole no bloco de notas, altere onde está escrito fundo4.gif para o nome da imagem que você quer testar, mas não se esqueça de colocar .jpg ou .gif no nome da imagem porque isso também faz parte do nome da imagem. E salve no seu computador na mesma pasta onde salvou a imagem, com o nome planodefundo.htm, desse mesmo jeito o nome do arquivo precisa ter o .htm no final pois assim será como se fosse uma pagina de internet. Agora é só ir até a pasta e clicar sobre esse arquivo que ele abrirá em seu navegador de internet e você poderá ver como fica a imagem de fundo sem precisar hospedar e mexer no seu blog. Isso poupa muito trabalho, afinal somente irá mexer no seu blog depois de visualizar a imagem de fundo que escolheu e já tem certeza que deseja usar-la.

Veja também:

Por que a imagem não aparece
Posicionar imagem de fundo
Fixar imagem de fundo
Como hospedar imagens
Related Posts with Thumbnails

61 comentários:

  1. É um efeito muito bonito este do fundo nos blogs. A maioria por aí não tem, e no entanto é tão fácil de instalar! Aliás, o seu é excelente: estes tijolinhos são uma combinação ótima.

    Abraços,

    Alberto.

    ResponderExcluir
  2. bom eu num inti=endi nada xD

    mais depois q eu li direitinho coloquei :D

    ResponderExcluir
  3. Fabiano, super valeu pela sua dica, há um tempão eu estava pesquisando em vários blogs como colocar um fundo com textura no meu blog, mas não conseguia colocar os códigos, olhei seu código fonte e aí entendi o que eu estava fazendo errado.
    Obrigada viu?
    Boas Festas.
    Bjobjo

    ResponderExcluir
  4. No nosso BLOG o fundo é todo preto, e não aparece esta informação que você fala de background-image..
    Como faço então..?
    Quero colocar o Brasão de nosso grupo como fundo e não consigo..
    Poderia me auxiliar..?
    Nosso BLOG é http://www.tribodoasfaltomc.blogspot.com/
    Se puder me auxiliar desde já agradeço
    Edson

    ResponderExcluir
  5. na pagina editar html procure por body e coloque esse código
    background-image: url(endereço da imagem);

    aqui tem mais coisas sobre imagens de fundo

    http://dicasparablogs.blogspot.com/search/label/Imagem%20de%20Fundo

    ResponderExcluir
  6. Boa Fabiano. Seus tutriais são muito ótimos, vou aprender muiito com eles, porisso já faz parte dos indicados da Mama.
    Obrigada por sua visita e um abraço!

    ResponderExcluir
  7. só uma dica...
    se usares a propriedade do background background-attachment: fixed; ele não se move quando te moves no blog.

    ResponderExcluir
  8. vicio

    eu também falei sobre imagem fixa e outras variações, mas fiz varias postagens sobre imagens de fundo e criei um marcador pra reunir todas, porque na ultima vez que tentei fazer uma postagem só para todas as opções de imagem de fundo ficou muita coisa e acaba confundindo.

    ResponderExcluir
  9. AIiiiiiiiii
    todos conseguiram!!!!!
    menos eu.... hum.. :-(

    ResponderExcluir
  10. Parabéns obrigada por ensinar!!!
    Beijos
    Josi

    ResponderExcluir
  11. eu nao consegui sera que poderia
    mandar um email para
    vinicius2432@hotmail.com
    ?

    background-image isso eu nao consigo


    obrigado

    ResponderExcluir
  12. aos que não conseguiram colocar a imagem de fundo.

    o código que falo na postagem é para de ser colocado junto com o que já está lá no body, desta forma:

    body {background-color: #66ccff;background-image: url(http://img19.imageshack.us/img19/8349/corpolg8.jpg);
    margin: 0;
    padding: 0;
    border: 0;
    text-align: center;
    color: #333333;
    font-size: small;
    }



    cuidado para não esquecer de fechar os parenteses ou chaves, nem do ponto e virgula no final.

    outro problema é na hora de hospedar a imagem e pegar o código certo da imagem, antes de colocar o endereço da imagem no código, cole no navegador para ver a imagem, deve aparecer somente a imagem sem mais nada na tela, se aparecer algo mais você pegou o código errado, geralmente o código está em direct link.

    ResponderExcluir
  13. FINALMENTE CONSEGUI!!
    VALEU A EQUIPE DO DICAS PARA BLOGS

    ResponderExcluir
  14. O endereço do blog onde coloquei a imagem de fundo é: www.operacaogenesis.blogspot.com

    ResponderExcluir
  15. Fabiano,
    como eu faço para deixar a imagem de fundo apenas na parte direita e esquerda do blog, sem aparecer a imagem toda no centro?
    bjss

    ResponderExcluir
  16. fiz uma modificação na postagem e coloquei o link sobre como posicionar a imagem de fundo

    http://dicasparablogs.blogspot.com/2008/04/posicionar-imagem-de-fundo.html

    ResponderExcluir
  17. Olá, consegui colocar o fundo, mas ficou por trás de tudo, só aparecem as bordinhas da imagem nas laterais e o texto fica em um fundo branco que ocupa quase toda a tela e fica por "cima" da imagem que coloquei. Como posso fazer pra colocar a imagem que quero ocupando todo o fundo, sem outro fundo na "frente"?

    ResponderExcluir
  18. não dá para postar código por aqui, então enviei a resposta por email

    ResponderExcluir
  19. MUUUUuuuuito obrigada de verdd!!deu certo aki!!

    ResponderExcluir
  20. Cara é mutio bom esse teu blog e com está me ajudando muito!! com certeza vou indicar ele para todos que conheço!

    ResponderExcluir
  21. Adoro seu blog, tem me sido muito util, mas por favor, esse assunto do plano de fundo nao conseguir colocar, será que dá pra me dizer como é passo-a-passo. Desculpe o incomodo. OBRIGADA! Lauriene Ribeiro www.pra.voce.zip.net

    ResponderExcluir
  22. se deu algo errado provavelmente você pegou o endereço errado da imagem, veja aqui como hospedar imagens
    http://www.dicasparablogs.com.br/2008/12/hospedagem-de-imagens.html

    ResponderExcluir
  23. Fabiano, fiz exatamente como voce explicou aqui pelo comentario pra quem não conseguiu e mesmo assim não ceu certo. Tem como me ajudar?
    hospedei a imagem no ImageHacks, testei colocando ela em uma nova janela pra ver se tava abrindo e tava.

    ResponderExcluir
  24. Olá Fabiano, gostaríamos de colocar em nosso blog uma imagem que ficasse exatamente como este site, por exemplo: http://gossipgirl-blog.cwtv.com/
    a única diferença é que queríamos em toda tela, no caso do exmplo, sem as barras verdes laterais.
    Como seria possível?
    agurdamos resposta

    ResponderExcluir
  25. é só usar a imagem de fundo no body, deste jeito
    body {background-image: url(fundo4.gif);

    mas claro com o endereço da imagem

    ResponderExcluir
  26. Nao consegui, sou uma anta...

    ResponderExcluir
  27. provavelmente está usando endereço errado na imagem
    veja aqui
    http://www.dicasparablogs.com.br/2009/07/imagem-nao-aparece.html

    ResponderExcluir
  28. Super,Hiper,Mega,Ultra,Fácil!!!XD
    ;D

    ResponderExcluir
  29. Ai não conseguir fazer não..
    no fundo normal que tinha, ficou branco e minha foto não é branca. Não sei por que ficou assim...
    Me ajuda

    ResponderExcluir
  30. provavelmente usou o endereço errado da imagem veja aqui

    http://www.dicasparablogs.com.br/2009/07/imagem-nao-aparece.html

    ResponderExcluir
  31. Só uma pequena dica pra agilizar as coisas para aquele que, como eu, testa várias imagens de fundo.
    O Fabiano falou pra salvar a imagem no PC e depois hospedar na internet, porém, se você pega a imagem na internet, você não precisa salvá-la no seu computador e depois hospedá-la na internet, basta copiar o endereço da imagem.
    Resumidamente: se você vai pegar a imagem na iternet, apenas copie o endereço dela e coloque na página do HTML do seu blog.

    E ao Fabiano, mais uma vez meus parabéns pelo blog. Tenho passado horas aqui.

    ResponderExcluir
  32. Marcelo Barreto da Fonseca
    concordo com você que funciona perfeitamente só copiar o endereço da imagem, mas existe um problema o dono dessa imagem pode resolver apaga-la a qualquer momento, não podemos prever isso, então essa é a razão que acho melhor ter o trabalho de salvar e hospedar, assim eu sei que a imagem não sumirá inesperadamente.

    ResponderExcluir
  33. Õlá, eu queria por a imagem de fundo, mas queria que onde esta o texto e as aplicaçoes ficasse com fundo branco, aparecendo essa imagem so nos lados. como faço? beijinho*

    ResponderExcluir
  34. Ladybird
    para fazer esse efeito você precisa usar uma imagem ou cor de fundo no body e outra no #outer-wrapper isso é a parte onde fica o conteudo do blog(postagens e menu)

    isso tudo pela pagina editar html

    ResponderExcluir
  35. tem que entrar na pagina editar html e colocar os códigos da imagem de fundo como mostra nesta postagem, se não conseguir fazer entre em contato conosco pelo email

    ResponderExcluir
  36. Certo, mas se você tiver um editor de imagem você pode fazer um fundo.
    Porque eu fiz um para meu. :)

    ResponderExcluir
  37. uhuw ... consegui !!!
    Agradeço a equipe do Dicas para Blogs

    ResponderExcluir
  38. a imagem ficou pequena e apenas na parte superior do Blog,o que eu fiz de errado?

    ResponderExcluir
  39. Danielle
    a imagem não muda de tamanho, você precisa fazer uma imagem do tamanho exato que vai aparecer no blog

    ResponderExcluir
  40. qual o tamanho da imagem que devo hospedar? estou confuso apenas com isso, como faço um background que se adapte tanto em monitores normais como wide? brigadão desde ja mano!
    da uma olhada no meu blog e me diz por favor o tamanho que devo fazer
    http://noelsonews.blogspot.com

    ResponderExcluir
  41. Noelson News
    não existe um tamanho certo, se for usar uma imagem grande por exemplo uma paisagem ela deve ser da largura do seu blog.

    mas se for usar uma textura não tem tamanho certo porque ela se repetirá para ocupar todo o fundo do blog, como fazemos no http://frasescurtas.com.br

    ResponderExcluir
  42. Oi, tudo bem? Porque que nas visualizações a imagem de fundo aparece certinho, mas quando clico "salvar modelo" o blog volta ao modelo antigo??? Heeeeeeeelp!

    ResponderExcluir
  43. Menina Veneno
    mas antes de alterar o blog já estava usando o novo modelo?

    exclua o histórico de internet, mas sinceramente achei muito estranho voltar ao modelo antigo depois de salvar.

    ResponderExcluir
  44. Oi Fabiano, tudo bem? Tadinha de mim... sei de nada não... agora que estou aprendendo (tentando) graças às dicas de blogs como o seu. Limpei o histórico, mas não fez nem cosquinha. Mudou nada. Te mandei um email no dicasparablogs@gmail.com Vc pode me ajudar? Ontem fui dormir de madrugada e não consegui desvendar o "mistério" sozinha...rsrs! Obrigada, bjo! ; )

    ResponderExcluir
  45. Menina Veneno, estou indo ver o seu email.

    ResponderExcluir
  46. adoreiiiiiiiiii suas digas!
    só com elas eu consegui personalizar meu blog.
    os outros complicam muito.obg

    ResponderExcluir
  47. ola seria possivel vcs me falarem o q devo apagar exatamente na parti editar html,tem varios body qual devo apagar para substituir a imagem...
    seria:

    é nessa parte q devo subistituir, o q devo apagar exatamente

    obrigada desde já pelas informaçoes

    ResponderExcluir
  48. deve alterar na tag body depois veja as outras parecida com ela se estão definindo imagem de fundo também, então retire as que estiver atrapalhando

    ResponderExcluir
  49. oi gostaria de saber se tem como pegar o templante deste site aqui gossipgirl-blog.cwtv.com estou precisando muito dele.

    ResponderExcluir
  50. Spotted Vila Garrido
    se o site não disponibiliza o código do template não podemos copia-lo.

    ResponderExcluir
  51. não tenho problema algum commeu background e sim com o fundo das postagens, quemais parecem umas caixas... quero deixar somente o fundo e as postagens como plano de fundo do background. alguém pode me ajudar? obrigada!

    ResponderExcluir
  52. os códigos para imagens de fundo são iguais, só muda o nome do estilo, por exemplo em body é na pagina toda, #sidebar é o menu e assim por diante...

    normalmente as postagens são no trecho #main{...

    ResponderExcluir
  53. gentee, por favor, segue la meu bloguizinhoo, idjovens.blogspot.com
    ta começandoo, por favor xXD:

    ResponderExcluir
  54. ex: eu querica colocar outra imagem de fundo na minha pagina,na pagina inicial,aparece um fundo. mais na minha pagina " Moda" eu queria colocar outro fundo! tem comoo??

    ResponderExcluir
  55. Andre
    é muito complicado criar fundo diferentes dependendo da pagina do blog... não é impossivel, mas gera muitos erros no html do seu blog

    teria que usar o código deste tutorial: Conteúdo diferente nas paginas do blog

    para colocar outro trecho do CSS (provavelmente o body) com a outra imagem de fundo

    ResponderExcluir
  56. Nossa funcinou eu ja tinha pegado varias imagens ai excluia as que num ia usar e usei uma da barbie ficou um maximo
    obg eu aprendi ^^

    ResponderExcluir
  57. meu amigo eu cliko em editar html dai aparece um monte de códigos eu apago esse códigos existente para colokar o da imagen o não?nao to consiguindo por favor ajuda.

    ResponderExcluir
  58. veja aqui: Imagem não aparece no Blog ou Site

    a maior parte das vezes o problema é endereço errado da imagem

    ResponderExcluir