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 de fundo aparecerá.
Então 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.
Leia também:
Mais detalhes sobre posicionar a imagem de fundo no blog
O que é CSS? Para que Serve e Como usar o CSS
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 de fundo aparecerá.
Então 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.
Leia também:
Mais detalhes sobre posicionar a imagem de fundo no blog
O que é CSS? Para que Serve e Como usar o CSS
Olá, visitando para conhecer.
ResponderExcluirAproveito 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.
Ae mano intereçado em arceria??
ResponderExcluirmeu 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
Onde coloco esse código?
ResponderExcluirEm editar html?
Mas em que parte?
Vanderlan
ResponderExcluiré pela pagina editar html na tag body, já fiz completei isso no texto.
obrigado por participar
Boas.
ResponderExcluirVenho por este meio preguntar se pode fazer um blog, para a associação de estudantes da minha escola?
responda!
Olá Fabiano, não consegui. Você poderia me ajudar? Sou novata em blogs!
ResponderExcluirabraço
Michelle
Michelle Santos
ResponderExcluirrespondi 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
Eu fiz como está escrito aí em cima, mas não deu certo.
ResponderExcluirQueria 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
Fernanda Toledo
ResponderExcluirse 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
Eu coloquei a imagem certinho com vc falou, mas fico umas falhas!Como eu corrijo?
ResponderExcluirveja 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
ResponderExcluirconsegui 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
ResponderExcluirabração e muito obrigado por toda sua ajuda
Boa noite,
ResponderExcluirGostaria 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.
- A Edição
ResponderExcluirprovavelmente é o endereço errado da imagem, veja aqui porque: Imagem não aparece
Obrigado pela resposta Fabiano. Nem todos tem paciência pra atender aos outros.
ResponderExcluirMas 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,
Oii, como faço para colocar a imagem do lado direito e no esquerdo também?
ResponderExcluirObg :}
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
ResponderExcluirOlha eu aqui de novo fabiano...
ResponderExcluirMinha 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...
Haiyat Raziya
ResponderExcluiré 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.
Ola
ResponderExcluirgostaria 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
veja esse link Trocar imagem de fundo no blog - Designer do modelo
ResponderExcluirlá mostra como fixa e posicionar a imagem de fundo, se quiser tem um video demonstrando
no meu caso em qual posicão deve ser colocada?
ResponderExcluirquero entre a linha tracejada e o titulo do post
deve ser na parte de baixo (bottom)
ResponderExcluirta osso :( .. nao consegui...olha q uma vez tinha conseguido um codigo por aí na net,mais agora n to axando :(, q raiva ;/
ResponderExcluircomo 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?
ResponderExcluirvocê pode usar esse tutorial para achar e remover a imagem de fundo... só precisa trocar por:
ResponderExcluirbackground:none;
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!!
ResponderExcluiros espaço são padding e margin mas podem estar em diversas partes do blog... é dificil dizer onde
ResponderExcluirFabiano, 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.
ResponderExcluirex: http://www.twittpotter.com/
@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)
ResponderExcluir@Fabiano Roberto
ResponderExcluirELES 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
a distancia na parte final é nesta linha
ResponderExcluirpadding:0 37px 180px 37px;
ou seja um espaço vazio no final, altere o valor 180 e veja se resolve o problema
ola amigo...
ResponderExcluirprimeiramente 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?
Rogerio Rocha
ResponderExcluirtem 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
Amigo estou com um problema inseri uma planilha do web app da microsoft no Blogger só que estou precisando apagar, remover ou esconder um item. Vou postar um link com a descrição do problema, creio que seja simples mas não estou conseguindo achar o caminho.
ResponderExcluirhttps://dl.dropbox.com/u/28991253/Problema%20blog.docx
Obrigado.
Pedro o unico jeito é achar onde colocou o código e apagar
ResponderExcluirOlá,
ResponderExcluirTudo bem?
Estou quebrando a cabeça para trocar o fundo do meu blog. Acontece que eu peguei um layout pronto e em "body", só aparece a seguinte linha entre tags:
body expr:class='"loading" + data:blog.mobileClass'
Ou seja, não há referência de background.
Como devo fazer?
já conseguiiii!!!! OBRIGADAAAA
ResponderExcluirok.
ResponderExcluir