Melhores Dicas para Blogs

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


Link desta Pagina

61Comentários:

Mestre Blogger disse...

É 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.

lark disse...

bom eu num inti=endi nada xD

mais depois q eu li direitinho coloquei :D

(¯`·._.·[***Celina***]·._.·´¯) disse...

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

TRIBO DO ASFALTO disse...

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

Fabiano Roberto disse...

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

blogger-dicasmamanunes disse...

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!

vício disse...

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

Roberto disse...

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.

Mar disse...

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

Josi disse...

Parabéns obrigada por ensinar!!!
Beijos
Josi

Novidades do habbo hotel disse...

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

background-image isso eu nao consigo


obrigado

Prg. Douglas Wesley disse...

Sou mais um que não conseguiu

Fabiano Roberto disse...

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.

Prg. Douglas Wesley disse...

FINALMENTE CONSEGUI!!
VALEU A EQUIPE DO DICAS PARA BLOGS

Prg. Douglas Wesley disse...

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

Thazya disse...

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

Fabiano Roberto disse...

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

Natalia Branco disse...

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"?

Fabiano Roberto disse...

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

Maria Luísa disse...

MUUUUuuuuito obrigada de verdd!!deu certo aki!!

World Gay Star disse...

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

Fabiano Roberto disse...

obrigado pelos elogios

Lauriene disse...

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

Fabiano Roberto disse...

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

ryden disse...

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.

Equipe Brilha Floripa! disse...

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

Fabiano Roberto disse...

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

mas claro com o endereço da imagem

fatima disse...

Nao consegui, sou uma anta...

Fabiano Roberto disse...

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

Anônimo disse...

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

Pamish disse...

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

Fabiano Roberto disse...

provavelmente usou o endereço errado da imagem veja aqui

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

Marcelo Barreto da Fonseca disse...

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.

Fabiano Roberto disse...

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.

Ladybird. disse...

Õ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*

Fabiano Roberto disse...

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

Ladybird. disse...

E como faço isso :S?

Fabiano Roberto disse...

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

Anônimo disse...

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

Anônimo disse...

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

Danielle disse...

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

Fabiano Roberto disse...

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

Noelson News disse...

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

Fabiano Roberto disse...

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

Menina Veneno disse...

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!

Fabiano Roberto disse...

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.

Menina Veneno disse...

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! ; )

Fabiano Roberto disse...

Menina Veneno, estou indo ver o seu email.

mary evelyn figueredo disse...

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

Biriba´s Capoeira disse...

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

Fabiano Roberto disse...

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

Spotted Vila Garrido disse...

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

Fabiano Roberto disse...

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

MENSAGEIRA DE DEUS! disse...

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!

Fabiano Roberto disse...

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{...

Guerreira de Cristo!!! disse...

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

Andre disse...

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??

Fabiano Roberto disse...

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

Naninha disse...

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 ^^

Anônimo disse...

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.

Fabiano Roberto disse...

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

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

Postar um comentário

Dicas e Tutoriais Úteis para Blogueiros

Gostou? Compartilhe!