Background imagem parada, fundo fixo no blogspot Exp: 5

Este exemplo usa o código css para que a imagem de fundo(background) fique parada, isso é aplicado a body, e nesse exemplo retirei as imagens de fundo das outras DIVs para que ela apareça por completo, mas não seria necessário.

Toda background tem como dar uma localização/posição para ela, mais para a esquerda, direita... nessa página usa centro.

Também tem a opção da imagem repetir ou não e em que sentido ela deve repetir.

Resolvi retirar todas as imagens de fundo das outras DIVs e deixar apenas a imagem de fundo da body e, repetindo verticalmente, centralizada e fixa.

É bom atentar para a cor de fundo, você deve ter em mente que talvez a imagem não apareça, então a cor de fundo deve contrastar com as cores de fonte de forma a ficar legível, isso é muito importante, tem sites de busca que avaliam isso e, seu blog pode ser prejudicado caso as cores de fonte e fundo sejam iguais.

Código usado para fundo fixo na body(fundo)

body {background: #ccc url(http://foitestado.com/Exemplos-fundo-blogspot/fundo-fixo.JPG) center repeat-y fixed;}

  • #ccc é o código para cor cinza
  • http://foitestado.com/Exemplos-fundo-blogspot/fundo-fixo.JPG é o endereço da imagem de fundo que você pode observar é "pequena na altura" mas larga
  • Center é a posição da imagem
  • Repeat-y é para repetir verticalmente, para aparecer em toda a página
  • Fixed é para que ela fique parada quando a página descer ou subir.

Muitas coisa podem ser feitas, como colocar uma imagem em um lado, em um canto da página ou no caso desse exemplo parece ter imagens diferentes para cada lado, mas na verdade é uma imagem de cor cinza no centro e uns rabiscos nas laterais, como pode ser percebido sou muito criativo com imagens e ficou esquisito, mas a função desse exemplo é mostrar o funcionamento de uma página de um modelo do blogger com uma imagem de fundo fixa.

Com esse efeito de repetir uma imagem pequena varias vezes e não usar uma imagem grande, pode-se diminuir o tempo de carregamento da página ou blog, só que precisa ser criativo. Isso com certeza melhora o blog para as pessoas e também é uma prática que influencia o SEO do blog.

Como citei anteriormente todas as outras DIVs de importância tiveram as background alteradas, não vou mostrar como eram antes, mas abaixo está como são agora(o background apenas), e lembre-se que, como descrito no post de introdução, não foi adicionado e sim Substituído um trecho de código referente a cor e imagem de fundo, e, esses códigos abaixo só mostram partes que referem ao background.

Lateral

#sidebar {background: transparent;}

Post e sidebar

#outer-wrapper {background: transparent;}

Topo

#header-wrapper {background: transparent;}

Post

#main {background: transparent;}