segunda-feira, 26 de janeiro de 2009

Como colocar imagem no background

Alguns exemplos para você experimentar em posts do seu blog de testes.

Como determinar a imagem:

<div style='background:url(http://lh3.googleusercontent.com/_HlIyV_enpD8/SX4lFZSnmVI/AAAAAAAALQM/eVd9iLAzAKw/s190/09.jpg); width:400px; height:200px; margin:auto; text-align:center;'>Exemplo de imagem de fundo.</div>
Exemplo de imagem de fundo.

Imagem centralizada:

<div style='background:url(http://lh3.googleusercontent.com/_HlIyV_enpD8/SX4lFZSnmVI/AAAAAAAALQM/eVd9iLAzAKw/s190/09.jpg) center center; width:400px; height:200px; margin:auto; text-align:center;'>Exemplo de imagem de fundo centralizada.</div>
Exemplo de imagem de fundo centralizada.

Imagem de fundo fixa:

<div style='color:white; background:url(http://4.bp.blogspot.com/_HlIyV_enpD8/TP_95m_cODI/AAAAAAAAKrM/PVWLMn_x7PA/s0-R/bg%255B1%255D.jpg) fixed; width:400px; height:200px; margin:auto; text-align:center;'>Exemplo de imagem de fundo fixa.</div>
Exemplo de imagem de fundo fixa.

Repetição na vertical:

<div style='border:1px #ffcc00 solid; background:url(http://lh3.googleusercontent.com/_HlIyV_enpD8/SYZTvPwEB0I/AAAAAAAALQM/xyzJlyVJhtQ/s32/tile.719336865.gif) repeat-y; width:400px; height:200px; margin:auto; text-align:center;'>Exemplo de imagem de fundo que se repete na vertical.</div>
Exemplo de imagem de fundo que se repete na vertical.

Repetição na horizontal:

<div style='border:1px #ffcc00 solid; background:url(http://lh3.googleusercontent.com/_HlIyV_enpD8/SYZTvPwEB0I/AAAAAAAALQM/xyzJlyVJhtQ/s32/tile.719336865.gif) repeat-x; width:400px; height:200px; margin:auto; text-align:center;'>Exemplo de imagem de fundo que se repete na horizontal.</div>
Exemplo de imagem de fundo que se repete na horizontal.

Não se repete:

<div style='border:1px #ffcc00 solid; background:url(http://lh3.googleusercontent.com/_HlIyV_enpD8/SYZTvPwEB0I/AAAAAAAALQM/xyzJlyVJhtQ/s32/tile.719336865.gif) no-repeat; width:400px; height:200px; margin:auto; text-align:center;'>Exemplo de imagem de fundo que não se repete.</div>
Exemplo de imagem de fundo que não se repete.

Imagem centralizada que não se repete:

<div style='border:1px salmon solid; background:url(http://lh3.googleusercontent.com/_HlIyV_enpD8/SYZTvPwEB0I/AAAAAAAALQM/xyzJlyVJhtQ/s32/tile.719336865.gif) center center no-repeat; width:400px; height:200px; margin:auto; text-align:center;'>Exemplo de imagem de fundo centralizada que não se repete.</div>
Exemplo de imagem de fundo centralizada que não se repete.

Imagem no canto inferior direito:

<div style='border:1px salmon solid; background:url(http://lh3.googleusercontent.com/_HlIyV_enpD8/SYZTvPwEB0I/AAAAAAAALQM/xyzJlyVJhtQ/s32/tile.719336865.gif) right bottom no-repeat; width:400px; height:200px; margin:auto; text-align:center;'>Exemplo de imagem no canto inferior direito.</div>
Exemplo de imagem no canto inferior direito.

Folha de estilos:

Alguns exemplos de imagens no background determinadas na folha de estilos:

body {background:url(http://lh3.googleusercontent.com/_HlIyV_enpD8/SYZTvPwEB0I/AAAAAAAALQM/xyzJlyVJhtQ/s32/tile.719336865.gif) #000000 repeat fixed;}
blockquote {border:silver solid; border-width: 0px 2px 2px 0px; background: transparent url(http://lh3.googleusercontent.com/_HlIyV_enpD8/SYZTvPwEB0I/AAAAAAAALQM/xyzJlyVJhtQ/s32/tile.719336865.gif) no-repeat scroll left top;
.blog-title {background:url(http://lh3.googleusercontent.com/_HlIyV_enpD8/SYZTvPwEB0I/AAAAAAAALQM/xyzJlyVJhtQ/s32/tile.719336865.gif) no-repeat left; padding-left:20px;}
]]></b:skin>

Propriedades separadas:

Nos exemplos supracitados, eu coloquei todas os atributos de fundo dentro da propriedade background, mas também é possível determinar cada um deles separadamente. Veja:

body {background-image:url(http://lh3.googleusercontent.com/_HlIyV_enpD8/SYZTvPwEB0I/AAAAAAAALQM/xyzJlyVJhtQ/s32/tile.719336865.gif);
background-color:#000000;
background-repeat:repeat;
background-attachment: fixed;}
background
Todas os atributos de fundo podem ser definidos aqui separados por espaço.
background-color
Cor de fundo.
background-image
Imagem de fundo seguindo o modelo url(nome-da-imagem.ext). Os navegadores atuais aceitam imagens com as extensões .gif, .jpg, .jpeg e .png. Imagens com extensão .bmp não devem ser usadas.
background-position
Posição da imagem de fundo. Valores aceitos:
  • top - topo
  • right - direita
  • bottom - base
  • left - esquerda
  • center - centro
  • porcentagem - Exemplos: 50% 0%, 40% 100%. O primeiro valor é a distância da esquerda para a direita e o segundo valor é a distância do topo para baixo.
  • lenght - Exemplos: 100px 0px, 40px 300px. O primeiro valor é a distância da esquerda para a direita e o segundo valor é a distância do topo para baixo.
  • combinação - Exemplos: bottom left, center 20%, 100px bottom, 50% 200px. O primeiro valor é a distância da esquerda para a direita e o segundo valor é a distância do topo para baixo.
background-repeat
Repetição da imagem de fundo. Valores:
  • repeat (lado a lado)
  • no-repeat (não repete)
  • repeat-y (repete na vertical)
  • repeat-x (repete na horizontal)
background-attachment
Valores:
  • fixed - imagem de fundo fixa. Quando você rola a barra, a imagem continua no mesmo lugar e só os elementos rolam.
  • scroll (padrão) - imagem rola junto com os elementos da página.
  • inherit - conforme o padrão do site (geralmente determinado em body)

Escolher o background de seu blog ficou fácil agora!

Update 1º/02/2009
Conheça galerias com Lindos backgrounds gratuitos.

Fonte: HTML Dog

32 comentários:

  1. Helen,
    Sou blog salva muita gente (inclusive eu, rs!).
    Elegi você a musa dos códigos da internet...

    No meu blog eu tenho um artigo que ensina a trocar o backgound, mas era muito superficial e incompleto. Aí apareceu você em meu Feed, salvando o meu mísero tutorial.

    http://ferramentasblog.blogspot.com/2008/12/trocar-imagem-de-fundo-do-blog.html

    Ao final do artigo faço referência ao seu blo e indico o leitura deste artigo como aprofundamento do que está no meu.

    Se aprovar, ficará lá, como está.

    Obrigado!

    Marcos Lemos

    ResponderExcluir
  2. @ferramentasblog,

    Não há nenhum problema, links e referências são sempre benvidos quando justos e espontâneos.

    Obrigada pela leitura habitual. Volte sempre!

    ResponderExcluir
  3. Olá tenho um blog chamado CLINPER e gostaria de fazer uma mudança, retirar o POSTAGENS MAIS ANTIGAS e colocar um barra de ( pagina 1 2 3 4...)
    pq uma coisa que andei reparando é que tem pessoas que tem dificuldade para achar onde muda de pagina,você poderia me ajudar da uma passada la pra dar uma olhada e de ma uma luz ..obrigado
    Rodrigo
    www.clinper.com

    ResponderExcluir
  4. Hota te agradezco mucho, recien comienzo con un blog y busque mucho hasta k encontre tu expectacular blog con tu genial expliación

    MUCHAS GRACIAS!! :)

    MIRA COMO QUEDO

    http://salaargentina2.blogspot.com/2009/01/historia-de-la-luciernaga-y-la.html

    NOS ESTAMOS VIENDO

    ResponderExcluir
  5. Não sei se você costuma participar de brincadeiras entre blogs, os famosos memes, mas deixei uma indicação para você lá no Fronteiras no Tempo.

    Ah! Após ler seu blog me animei a mudar a template do meu. Muito obrigado por nos mostrar que a linguagem html não é impossível de ser compreendida por leigos no assunto.

    Abraço

    ResponderExcluir
  6. Boa tarde! estou tentando colocar uma imagem no plano de fundo do meu blog e ja tentei todos os caminhos mas a imagem não aparece.
    O que faço?!
    Me ajude por favor...
    Obrigada

    ResponderExcluir
  7. @Delex Trufas,

    Contrate alguém para fazer isso para você.

    ResponderExcluir
  8. Helen minha querida.. eu queria saber como faço pra por uma imagem alem do background... por exemplo tenho meu background e quero colocar uma imagem no caso uma flor em algum lugar do fundo acima do background já posicionado, como faço?

    ResponderExcluir
  9. @Herzi, sua pergunta foi muito ampla e retornou milhares de respostas. Tente refinar sua pesquisa.

    ResponderExcluir
  10. nossa, muuuito obrigada xD

    só Deus sabe o quanto eu apanhei pra conseguir achar algo que realmente me ajudasse!

    ResponderExcluir
  11. @Fallen Angel, eu que agradeço.

    Volte sempre!

    ResponderExcluir
  12. Oie Helen!
    Gostaria de saber como faço pra deixar meu Blog assim como o seu,
    com o fundo branco,
    e uma imagem atraz desse fundo branco.
    Tenho visto isso em muitos lugares,
    mais ainda não encontrei um tutorial pra me ajudar ou dicas e tal.

    Obrigada! =D

    ResponderExcluir
  13. @Michelly, o fundo branco geralmente é da div #outer-wrapper, você tem que colocar na folha de estilos:

    #outer-wrapper {background:#ffffff;}

    ResponderExcluir
  14. Oie Helen!
    Eu aqui de novo pra falar que deu certo! =D
    Olha como ficou: http://percyjacksonmt.blogspot.com/

    ResponderExcluir
  15. Michelly,

    Ficou bom, vi que até borda arredondada você usou. Legal!

    ResponderExcluir
  16. Oi, Helen! Gostei muito do blog. As dicas são muito boas. Gostaria de saber se há como colocar mais de uma imagem no blog. Eu quero colocar uma no canto direito e outra na lateral esquerda. É possível?

    ResponderExcluir
  17. Helen Será que voce podia me ajudar e porque eu botei uma imagem de fundo no meu blogspot mas.. a imagem so aparece No Firefox , google chrome , safari e opera no internet explorer fica um fundo horrivel. Olha ai
    www.animesdetodosostipos.blogspot.com
    Espero sua resposta!

    ResponderExcluir
  18. Olá Helen,
    Parabéns pelas dicas, gostaria de saber como colocar os icone, ou simblos de mídias sociais, contato em meu blog?

    Obrigada!

    ResponderExcluir
  19. Helen, gostaria de de colocaruma imagem deixar no campo de meus posts, isto é como fundo como se fosse uma cor qualquer, mas eu meu caso queria que fosse uma imagem, poderia me dar uma dica de como faço?
    Te aguardo
    Abraços

    ResponderExcluir
  20. Oi estou fazendo tudo para colocar imagem no plano de fundo do blog e não consigo o que será q tem de errado?
    Vc poderia me ajudar?

    ResponderExcluir
  21. Olá Helen infelizmente não consigo mudar a imagem do meu blog pois tenho pouca experiencia vc pode me ajudar?

    ResponderExcluir
  22. Olá Helen, Parabéns pelo Blog e dicas de muito valor para nós iniciantes... valew!

    ResponderExcluir
  23. Oi helen. Será que vc pode me dar uma ajudinha.
    Tem semanas que estou tentando deixar o meu blog com fundo fixo, mas o código fixed parece não funcionar, a barra de rolagem continua movendo a imagem de fundo, já tirei o scroll e coloque no-repeat mas não surtil efeito.
    O código esta assim:

    body, p
    {
    margin: 0.5em 0;
    font-family: Tahoma, Arial, Helvetica, Sans-Serif;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    text-align: justify;
    }

    body
    {
    margin: 0 auto;
    padding: 0;
    color: #9E9E9E;
    background-color: #000000;
    background-image: url('http://img641.imageshack.us/img641/4849/background1920x1080blog.png');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: top left;
    }

    Agradeço desde já.
    Leonardo editor

    ResponderExcluir
  24. Leonardo, provavelmente tem alguma div do seu código definindo background. O que você está vendo se mover não é o bg do body, mas dessa div. Sugiro fuçar o seu código para ver o que mais tem background definido.

    Se não achar no editor do Blogger, use Google Chrome, Firebug ou Web Developer, porque eles mostram o código mais completo, incluindo folhas de estilo que estão embutidas.

    Boa sorte!

    ResponderExcluir
  25. Olá! Eu uso tumbler, esse html pode ser usado por lá? Adiciono onde esses códigos no meu theme? :*

    ResponderExcluir
  26. Jéssica, não testei. Se for experimentar faça em um Tumblr de testes primeiro.

    ResponderExcluir
  27. Seu, post me ajudou muito é uma das grandes dúvidas de quem esta começando a configurar seu blog.

    Um grande abraço!

    ResponderExcluir
  28. tenho uma duvida preciso colocar munha tv ,( uestream e justin lado a lado no cabeçalho do blog não consigo me ajuda . qualquer coisa manda por e- mail. hnuneshotmail@yahoo.com.br

    ResponderExcluir
  29. Boas helen! :D
    Tenho uma pergunta que tentei pesquisar na net, mas as respostas que encontrei nao resolveram o problema, espero que voce consigo. Eu ja conhecia estes codigos, mas tenho uma duvida em relação ao background. Podemos ou não colocar um background com hiperligação?

    Tipo aqueles sites que tem uma imagem atraz a fazer publicidade e quando carregamos envianos para outro site!

    Espero que consiga ajudar!
    Obrigado.

    ResponderExcluir
    Respostas
    1. Joao Tomaz, com HTML e CSS isso não é possível. Com JavaScript sim. Mas não é um background de verdade, é uma div que gera uma camada "atrás" do conteúdo, simulando um background.

      Excluir

Posts relacionados