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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJVrh_KnqTB7sBt8owyRJhYeLoaEklYBi1qNuQXdnVptr_9giN3vzphUfkNQmHsKNdhLw7HrvTd_hFiA8wCWMQzTJP6u8rdGBxFis1nyFT0VgIC4K4ZEPELPaAYtR_CnFoUcHxo3U1Jt7v/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJVrh_KnqTB7sBt8owyRJhYeLoaEklYBi1qNuQXdnVptr_9giN3vzphUfkNQmHsKNdhLw7HrvTd_hFiA8wCWMQzTJP6u8rdGBxFis1nyFT0VgIC4K4ZEPELPaAYtR_CnFoUcHxo3U1Jt7v/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC4oeZ3kZ3u825jnoAwxZQc5J9PHqdY8oMXYTT1IF0-RmTLzNNoGw_FGCH5awRPlMV_wMQY_vcvTI4rHhhd069c6NHgeBdlSxjGXztQv_ONVBeHoSGDRjZLGnSknaBQ3XvomquKvTnQ7sV/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/s32/tile.719336865.gif) #000000 repeat fixed;}
blockquote {border:silver solid; border-width: 0px 2px 2px 0px; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/s32/tile.719336865.gif) no-repeat scroll left top;
.blog-title {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ANdcJoDtqHbhw2sJlcwhFrgNu6fQZByz8G13Vsck0slClXkAOqnzTzX83Z6hr6-QljL_xWVsFVQk-DkIxYBEADbU2wW2lXtFpkCLWZ2GUTlcE1iZ0fiFBtfxgBIJNDBJFIL0q2zfQoXe/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