Pular para o conteúdo principal

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

Comentários

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

    ResponderExcluir
  2. 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

    ResponderExcluir
  3. Onde coloco esse código?
    Em editar html?
    Mas em que parte?

    ResponderExcluir
  4. Vanderlan
    é pela pagina editar html na tag body, já fiz completei isso no texto.
    obrigado por participar

    ResponderExcluir
  5. Boas.

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

    responda!

    ResponderExcluir
  6. Olá Fabiano, não consegui. Você poderia me ajudar? Sou novata em blogs!
    abraço
    Michelle

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

    ResponderExcluir
  8. 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

    ResponderExcluir
  9. 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

    ResponderExcluir
  10. Eu coloquei a imagem certinho com vc falou, mas fico umas falhas!Como eu corrijo?

    ResponderExcluir
  11. 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

    ResponderExcluir
  12. 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

    ResponderExcluir
  13. 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.

    ResponderExcluir
  14. - A Edição
    provavelmente é o endereço errado da imagem, veja aqui porque: Imagem não aparece

    ResponderExcluir
  15. 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,

    ResponderExcluir
  16. Oii, como faço para colocar a imagem do lado direito e no esquerdo também?

    Obg :}

    ResponderExcluir
  17. 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

    ResponderExcluir
  18. 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...

    ResponderExcluir
  19. 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.

    ResponderExcluir
  20. 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

    ResponderExcluir
  21. 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

    ResponderExcluir
  22. no meu caso em qual posicão deve ser colocada?
    quero entre a linha tracejada e o titulo do post

    ResponderExcluir
  23. ta osso :( .. nao consegui...olha q uma vez tinha conseguido um codigo por aí na net,mais agora n to axando :(, q raiva ;/

    ResponderExcluir
  24. 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?

    ResponderExcluir
  25. você pode usar esse tutorial para achar e remover a imagem de fundo... só precisa trocar por:
    background:none;

    ResponderExcluir
  26. 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!!

    ResponderExcluir
  27. os espaço são padding e margin mas podem estar em diversas partes do blog... é dificil dizer onde

    ResponderExcluir
  28. 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/

    ResponderExcluir
  29. @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
  30. @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

    ResponderExcluir
  31. 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

    ResponderExcluir
  32. 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?

    ResponderExcluir
  33. 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

    ResponderExcluir
  34. 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.
    https://dl.dropbox.com/u/28991253/Problema%20blog.docx

    Obrigado.

    ResponderExcluir
  35. Pedro o unico jeito é achar onde colocou o código e apagar

    ResponderExcluir
  36. Olá,

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

    ResponderExcluir
  37. já conseguiiii!!!! OBRIGADAAAA

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

Sites de referências

Quer saber e mostrar no seu blog de onde vem suas visitas? Além dos contadores de visitas tradicionais que mostram estatísticas e o numero total de visitantes ainda podemos colocar no blog algumas ferramentas que mostram de onde vieram nossos visitantes, em qual site eles encontram nosso link para visitar o blog. O Feedit , não precisa de cadastro é apenas copiar o código(clique no botão getFeedit no site) e colocar no blog e já está pronto, as pessoas que entrarem no blog após você colocar o código já apareceram na lista gerada pelo site, ele tem algumas opções entre elas mostrar um mapa. O site Referrer precisa fazer cadastro e também fornece uma lista de onde vieram as visitas, mostrando inclusive a quantidade de visitantes de cada site. O cadastro é rápido e depois é só gerar o código para colocar no blog.Nos dois casos o código deve ser colocado no blog pela pagina layout, adicionar gadget, html/javascript, cole o código e clique para salvar. Esse tipo de serviço além de matar n

Novo Painel do Blogger e os Comentários

O Blogger atualizou seu painel para melhorar a navegação e deixar o Blogger mais fácil de usar. Concordo que ficou bonito, mas a notificação sobre novos comentários desapareceu. Na pagina inicial antiga do Blogger era fácil de saber havia comentários aguardando a moderação.

Formulário de contato

Uma coisa que todos os blogs precisam é manter um meio de comunicação com seus visitantes além dos comentários pois nem tudo que as pessoas querem dizer a respeito de um blog são comentários existem outros assuntos como criticas, sugestões, parcerias e outras coisas. Então é sempre bom deixar um endereço de e-mail no blog, mas além disso é possível colocar um formulário que enviará as mensagens de seus visitantes para seu e-mail. Esse formulário de contato pode ser colocado facilmente no blog pegando o código no site http://www.formulariopro.pog.com.br , lá você preencherá alguns dados como seu e-mail e pronto. Basta pegar o código e colocar no seu blog, no Blogspot isso deve ser feito pela pagina editar layout >>> adicionar elemento de pagina >>> html/javascript então coloque o código nessa janela e clique salvar. Lembre-se de verificar a caixa de spam (ou e-mails em massa) de seu e-mail pois alguns deles classificam os e-mails recebidos desse serviço com spam. Ve