25/04/2008

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
Related Posts with Thumbnails

40 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. Mais uma vez usei suas informações foi um sucesso...
    Me visite e veja como sou uma aluna aplicada...kkk

    Obrigada.
    Ivy

    ResponderExcluir
  14. 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
  15. - A Edição
    provavelmente é o endereço errado da imagem, veja aqui porque: Imagem não aparece

    ResponderExcluir
  16. 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
  17. Oii, como faço para colocar a imagem do lado direito e no esquerdo também?

    Obg :}

    ResponderExcluir
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. no meu caso em qual posicão deve ser colocada?
    quero entre a linha tracejada e o titulo do post

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

    ResponderExcluir
  25. 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
  26. você pode usar esse tutorial para achar e remover a imagem de fundo... só precisa trocar por:
    background:none;

    ResponderExcluir
  27. 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
  28. os espaço são padding e margin mas podem estar em diversas partes do blog... é dificil dizer onde

    ResponderExcluir
  29. 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
  30. @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
  31. @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
  32. 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
  33. 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
  34. 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
  35. 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
  36. Pedro o unico jeito é achar onde colocou o código e apagar

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