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!
Fonte: HTML Dog
