Posicionar imagem de fundo

O código para posicionar a imagem de fundo do seu site é:

background-repeat: no-repeat;
background-position: right top;
background-color: #6699FF;
background-image: url(fundofixo.jpg);

Esse código deve ser colocado na tag body{...} do seu html(página editar html). A linha background-repeat: no-repeat; faz que a imagem apareça somente uma vez.

background-position: right top; aqui escolhemos o lugar que a imagem aparecerá no lugar de right(direita) pode ser center(centro) ou left(esquerda). E no lugar de top(alto da página) você pode usar center(meio da página) ou bottom(embaixo da página)

As últimas duas linhas:

background-color: #6699FF;
background-image: url(fundofixo.jpg);

São a cor e a imagem de fundo as quais você colocará a seu critério, se precisar de ajuda para achar o código das cores clique aqui.

Outra coisa que pode ser adicionada a este código é: background-attachment: fixed;
para fazer a imagem ficar parada, ou seja, somente o conteúdo do seu site irá se mover assim a imagem ficará sempre visível, veja mais sobre fixar a imagem de fundo.

Veja um exemplo de página com imagem de fundo posicionada.

Mais detalhes sobre posicionar a imagem de fundo no blog

Link desta página

Comentários

35 Comentários

35 Comentários:

Catarino disse...: Olá, visitando para conhecer.
Aproveito para convidar que visite meu blog e, se gostar, vote no blogstar.
Quer aumentar suas visitas, conheça o sistema igbiz, clic no banner em meu blog e participe, é tudo grátis e vc ganha 150 visitas ao se inscrever.; 26 de abril de 2008 21:41
Soul Hacker Downloads disse...: Ae mano intereçado em arceria??

meu site é muuito bem feito, e eu atualizo-o sempre!!

o link dele: http://www.downloadsoul.vai.la/

Se tiver me add no msn e passa seu banner, blz??

flows; 27 de abril de 2008 09:31
Vanderlan disse...: Onde coloco esse código?
Em editar html?
Mas em que parte?; 10 de agosto de 2008 12:58
Fabiano Roberto disse...: Vanderlan
é pela pagina editar html na tag body, já fiz completei isso no texto.
obrigado por participar; 10 de agosto de 2008 17:17
Anónimo disse...: Boas.

Venho por este meio preguntar se pode fazer um blog, para a associação de estudantes da minha escola?

responda!; 18 de outubro de 2008 19:59
Michelle Santos disse...: Olá Fabiano, não consegui. Você poderia me ajudar? Sou novata em blogs!
abraço
Michelle; 7 de julho de 2009 13:46
Fabiano Roberto disse...: Michelle Santos

respondi para você por email.

os problemas mais comuns são usar o endereço errado de imagem ou então deixar faltando algum detalhe no código; 7 de julho de 2009 14:35
Fernanda Toledo disse...: Eu fiz como está escrito aí em cima, mas não deu certo.
Queria saber se é necessário apagar as tags ja prontas, para então colocar essas que estão aki.
Hospedei tbm uma imagem no site que vcs "recomendam", mas a imagem não fica nem nesta formatação do blog, nem na formatação para deixar uma imagem fixa de fundo.não sei pq, pois eu copio o url e coloco lá, mas nao fica.

Alguém pode , por favor, me ajudar ?

beijos; 22 de julho de 2009 16:35
Fabiano Roberto disse...: Fernanda Toledo
se já tiver algo definindo a posição da imagem de fundo é preciso apagar, senão terá duas instruções para a mesma imagem.

o problema com imagens geralmente é a url errada, veja aqui se está usando a correta http://www.dicasparablogs.com.br/2009/07/imagem-nao-aparece.html

qualquer coisa escreva para nosso email e envie o código que está tentando usar e a imagem; 22 de julho de 2009 16:39
Xd disse...: Eu coloquei a imagem certinho com vc falou, mas fico umas falhas!Como eu corrijo?; 22 de agosto de 2009 09:51
Fabiano Roberto disse...: veja na explicação e compare com o código que colocou no blog, e verifique também se o endereço da imagem está correto; 22 de agosto de 2009 11:12
PROFESSOR MEIER F. C. disse...: consegui na primeira vez que você me ensinou a deixar só as bordas do blog com a imagem, mas, agora quando coloco fica no fundo todo do blog
abração e muito obrigado por toda sua ajuda; 26 de agosto de 2009 02:31
Ivy Freitas disse...: Mais uma vez usei suas informações foi um sucesso...
Me visite e veja como sou uma aluna aplicada...kkk

Obrigada.
Ivy; 17 de novembro de 2009 23:46
- A Edição disse...: Boa noite,

Gostaria de saber o que pode estar causando o seguinte erro:

Eu coloco qualquer imagem como imagem de fundo e só o que acontece é a página do blog ficar completamente branca, ainda com o texto aparecendo, porém, os links não acusam (não mudam de cor, parecem inativos).

Obrigado pela atenção, A Edição do Blog.; 2 de março de 2010 22:24
Fabiano Roberto disse...: - A Edição
provavelmente é o endereço errado da imagem, veja aqui porque: Imagem não aparece; 3 de março de 2010 15:31
- A Edição disse...: Obrigado pela resposta Fabiano. Nem todos tem paciência pra atender aos outros.

Mas realmente o "defeito" continua. Talvez eu esteja colocando a tag de uma forma incorreta ou talvez alguma outra tag que eu tenha em meu blog esteja, de alguma forma "anulando" esta.
Será que pode existir uma outra causa além da url errada?

Obs: Eu usei o ImageShack desde a primeira vez.

Obrigado pela atenção mais uma vez,; 4 de março de 2010 21:53
kiki disse...: Oii, como faço para colocar a imagem do lado direito e no esquerdo também?

Obg :}; 3 de julho de 2010 14:32
Fabiano Roberto disse...: no html não é possivel colocar uma imagem de cada lado, você deve criar uma imagem só, ela pode ser mais larga para dar a impressão que são duas separadas; 3 de julho de 2010 15:03
Haiyat Raziya disse...: Olha eu aqui de novo fabiano...
Minha dúvida é se a imagem é grande demais e vc acaba perdendo partes dela, tem como reduzir o tamanho pelo html ou somente pelo tamanho da imagem mesmo?
Desculpa aí a chateação...; 26 de julho de 2010 02:43
Fabiano Roberto disse...: Haiyat Raziya
é possivel reduzir das duas maneiras que falou, mas a correta é editar a imagem e salvar no tamanho certo.

se reduzir no html, ela vai demorar o mesmo tempo para carregar do que se aparecesse no tamanho real da imagem.; 26 de julho de 2010 15:41
Doce Sex Shop disse...: Ola
gostaria de saber como eu posso deixar a imagem grande e sem repetições .... coloquei a imagem direitinho e ela esta aparecendo repetida ... como posso mudar??
Brigadaão; 29 de setembro de 2010 12:39
Fabiano Roberto disse...: veja esse link Trocar imagem de fundo no blog - Designer do modelo

lá mostra como fixa e posicionar a imagem de fundo, se quiser tem um video demonstrando; 29 de setembro de 2010 13:52
Mp3 Samba e Pagode disse...: no meu caso em qual posicão deve ser colocada?
quero entre a linha tracejada e o titulo do post; 26 de novembro de 2010 19:50
Fabiano Roberto disse...: deve ser na parte de baixo (bottom); 26 de novembro de 2010 19:53
Mp3 Samba e Pagode disse...: ta osso :( .. nao consegui...olha q uma vez tinha conseguido um codigo por aí na net,mais agora n to axando :(, q raiva ;/; 27 de novembro de 2010 04:11
rai disse...: como faz pra tirar o background do blog? axo feio, ou tem como pelomenos deixar do tamanho exato do blog? tipo pra ficar mais ou menos escondido?; 4 de março de 2011 18:38
Fabiano Roberto disse...: você pode usar esse tutorial para achar e remover a imagem de fundo... só precisa trocar por:
background:none;; 5 de março de 2011 01:07
Richelle disse...: O post me ajudou bastante! Mas eu tenho uma dúvida, eu quero deixar o cabeçalho "colado" com as colunas dos posts e sidebar. Tem como? Me ajuda!!; 2 de julho de 2011 18:38
Fabiano Roberto disse...: os espaço são padding e margin mas podem estar em diversas partes do blog... é dificil dizer onde; 2 de julho de 2011 19:41
Jessi Potter disse...: Fabiano, você poderia me ensinar como colocar um imagem apenas no fim da sidebar (da coluna inteira) queria por uma imagem pra mudar o padrão quadrado, e tbm nao quero que o ultimo widget fique sobre.
ex: http://www.twittpotter.com/; 11 de dezembro de 2011 23:44
Fabiano Roberto disse...: @Jessi Potter basicamente seria usar essa imagem que falou como fundo e colocar o código bottom para escolher o local que a imagem de fundo aparece(embaixo); 12 de dezembro de 2011 00:23
Jessi Potter disse...: @Fabiano Roberto

ELES UTILIZAM O SEGUINTE CÓDIGO
#sidebar{
float:right;
overflow:hidden;
display:inline;
width:217px;/*291*/
min-height:450px;
margin:60px 18px 20px 0;
padding:0 37px 180px 37px;
font-size:11px;
background:#C94F08 url(http://img683.imageshack.us/img683/5460/bgsbbtm.jpg) no-repeat bottom center;
}
____________________
ao tentar adapitalo ao meu, ficou tudo normal, mais a imagem da background deve ficar a uma determinada ditancia do ultimo gadget para que possa ser vizualizada. no www.twittpotter.com/ fica desse modo, mais quando eu adicionei no meu não ficou desse modo. o que falta eu modificar?

#help-me; 12 de dezembro de 2011 14:53
Fabiano Roberto disse...: a distancia na parte final é nesta linha

padding:0 37px 180px 37px;

ou seja um espaço vazio no final, altere o valor 180 e veja se resolve o problema; 12 de dezembro de 2011 15:43
Rogerio Rocha disse...: ola amigo...
primeiramente PARABENS PELO SITE...sou de carteirinha daki..^^ bom vamos ao meu problema

coloquei uma imagem de fundo, onde nela já se encontra o meu logo, então quando coloco o codigo de imagem fixa,logicamente todo conteudo do site se mexe e a imagem não certo?! entao..o problema que fica estranho o titulo não se mexer junto afinal faz parte do meu fundo..faço isso porque deixar a imagem se repetindo fica feio..agora gostaria de deixar a imagem de fundo no top normal mas tirar aquela cor escura que ficou na metade da tela pra baixo..tem como?; 14 de janeiro de 2012 00:37
Fabiano Roberto disse...: Rogerio Rocha
tem que usar imagens separadas para o fundo e o titulo do blog

a imagem de fundo você coloca pela pagina editar html mas a imagem do titulo é na pagina layout, clicando para editar o cabeçalho do blog; 14 de janeiro de 2012 13:39

Melhores Dicas para Blogueiros

Posicionar imagem de fundo

35 Comentários:

Postar um comentário