Como colocar imagens de fundo nas postagens (Blogger “Blogpost”)

Próxima Dica

Como determinar a imagem: 

<div style='background:url(http://i1147.photobucket.com/albums/o555/marcio_antonio1/21.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://i1147.photobucket.com/albums/o555/marcio_antonio1/21.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://i1147.photobucket.com/albums/o555/marcio_antonio1/fundo22.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://i1147.photobucket.com/albums/o555/marcio_antonio1/fundo.jpg) 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://i1147.photobucket.com/albums/o555/marcio_antonio1/fundo.jpg) 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://i1147.photobucket.com/albums/o555/marcio_antonio1/fundo.jpg ) 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://i1147.photobucket.com/albums/o555/marcio_antonio1/fundo.jpg ) 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://i1147.photobucket.com/albums/o555/marcio_antonio1/fundo.jpg  ) 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.

OBS: Você precisa hospedar todas as imagens que você for usar, existe vários sites de hospedagens o OBtudo utiliza o photobuket  nós não conseguimos trabalhar com fotos hospedadas no Picasa.

Folha de estilos:
Alguns exemplos de imagens no background determinadas na folha de estilos: 
Esse código deve ser colocado entre body e ]]></b:skin>

body {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZUsJtKuIp7OB4eSNIwv0dZAZbxoHYVQxSzl38SDXLwhS7ISO4xV44E2qw8Qm7x76Mm891tre7rKASOS_pAwnCMlT2NycgaP-ADJUdKSIlrpyItbeRiM7MPugFZ3FWLpuRwfvUNVDLKQBm/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/AVvXsEiZUsJtKuIp7OB4eSNIwv0dZAZbxoHYVQxSzl38SDXLwhS7ISO4xV44E2qw8Qm7x76Mm891tre7rKASOS_pAwnCMlT2NycgaP-ADJUdKSIlrpyItbeRiM7MPugFZ3FWLpuRwfvUNVDLKQBm/s32/tile.719336865.gif) no-repeat scroll left top;
.blog-title {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZUsJtKuIp7OB4eSNIwv0dZAZbxoHYVQxSzl38SDXLwhS7ISO4xV44E2qw8Qm7x76Mm891tre7rKASOS_pAwnCMlT2NycgaP-ADJUdKSIlrpyItbeRiM7MPugFZ3FWLpuRwfvUNVDLKQBm/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/AVvXsEiZUsJtKuIp7OB4eSNIwv0dZAZbxoHYVQxSzl38SDXLwhS7ISO4xV44E2qw8Qm7x76Mm891tre7rKASOS_pAwnCMlT2NycgaP-ADJUdKSIlrpyItbeRiM7MPugFZ3FWLpuRwfvUNVDLKQBm/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)

Próxima Dica