Busca

Carregando...

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

Posts relacionados