Background - Imagem de fundo

Nos blogs com largura definida podemos ver que nas partes laterais existe um fundo colorido que nem sempre nos agrada.
Essa cor de fundo pode ser alterado e até pode ser usada uma imagem para isso.

Na minha opinião, um fundo diferente pode mudar completamente a aparencia do blog e por isso decidi explicar como fazer essas alterações.

Entrando no código fonte do blog procuramos por:

body {
   background:$bgcolor;
   margin:0;
   color:$textcolor;

Estes códigos definem o fundo do blog (area total que aparece no monitor), posição e cor do texto.

Normalmente a cor de fundo é definida pelo $bgcolor que pode ser alterado para qualquer cor e é nessa parte que também se pode definir a imagem de fundo a utilizar.
Neste blog, como podem ver, a imagem que uso é esta:






e para a usar basta que na condição background:$bgcolor; se defina o endereço da imagem, a posição onde a queremos, se ela se vai repetir e se vai ficar fixa ou não.
No caso deste blog fica da seguinte maneira:

background: url(ENDEREÇO DA IMAGEM) repeat top left fixed;

As condições logo após o endereço da imagem definem o que atrás falei.

- repeat - define a repetição da imagem e pode ter como variáveis
   - no-repeat para não ser reptida
   - repeat para ser reptida no corpo todo
   - repeat-x para ser repetida na horizontal (largura)
   - repeat-y para ser repetida na vertical (altura)

- top - define a posição inicial na vertical e pode ter como variaveis
   - top para o topo da pagina
   - center para o centro da pagina
   - bottom para o fundo da pagina

- left - defina a posição inicial na horizontal e pode ter como variaveis
   - left para ficar alinhada à esquerda
   - center para ficar alinhada ao centro
   - right para ficar alinhada à direita

- fixed - define se a imagem se move quando usamos o scroll (roda do rato). Neste caso eu defini como fixa.

Para além da area à volta do blog, estas condições podem ser usadas também:
- no corpo todo do blog - #outer-wrapper {
- no cabeçalho - #header {
- na area do artigos - #main-wrapper {
- na coluna lateral - #sidebar-wrapper {
- no rodapé - #footer {
e em qualquer zona do blog onde se possa definir a cor de fundo (background)