Background imagem post e sidebar do blogspot Exp: 3

Este exemplo usa o código css abaixo para a div outer-wrapper, no-repeat para a imagem não repetir, center é o alinhamento horizontal(lateral), TOP vai fazer com que o alinhamento superior seja o topo da div.

Como eu usei no-repeat para a imagem não repetir usei esse código #940f04 para a cor de fundo, até porque se o texto fosse grande iria aparecer a imagem de fundo usada na body{

Quando você ver um código Riscado, isso significa que ele foi apagado do código fonte dessa página de exemplo.

#outer-wrapper { background: #940f04 url(http://foitestado.com/imagens/elefantes-crepusculo-africa.JPG) top center no-repeat; }

Também foi retirado a imagem e cor de fundo das seguintes divs:

Cor e imagem de fundo da area de post

#main {background: #940f04 url(http://foitestado.com/imagens/elefantes-crepusculo-africa.JPG) right top no-repeat;}

Topo

#header-wrapper { background: #8b2 url(http://www.blogblog.com/moto_son/headbotborder.gif) bottom left repeat-x;}

Se der uma olhada ao lado a sidebar tem um fundo semi-transparente, esse efeito é conseguido com uma imagem de fundo de 4 pixeis(2 x 2) onde dois pontos são transparentes, veja ela ampliada 100 vezes:

Já existe uma forma de fazer imagens Png semi-transparente com o PixelFormer(clique aqui), Png tem melhor qualidade, você pode ver um exemplo de imagem semi-transparente(clique aqui)

A div é a sidebar e o css para cor de fundo semi-transparente dela é:

#sidebar { background: url(http://www.foitestado.com/Exemplos-fundo-blogspot/bit.GIF) repeat;}