Conhecer estilos do blog - background

No último artigo falei das várias partes que compõem um blog e disse que iria falar delas individualmente mas antes de o fazer acho que devo falar dos diversos estilos que se podem aplicar num blog em cada uma dessas partes.

No início do vosso código fonte, mais propriamente na área de estilos (CSS), podem encontrar, modificar, adicionar ou eliminar qualquer configuração que desejarem e para saber melhor onde mexer vou explicar o significado de cada estilo e como podem ser modificados.
Para começar vou começar pelo preenchimento de fundo das várias partes, o BACKGROUND.

Este estilo define o fundo de cada área onde esteja inserido e podem ser usadas as seguintes propriedades:

background-color:
define a cor de fundo através de um código de cor que podem encontrar aqui.

Ex: background-color: #000000;

background-image:
define a imagem a usar como fundo.

Ex: background-image: url(‘ENDEREÇO DA IMAGEM’);

(NOTA: é aconselhável usar uma imagem de pequenas dimensões porque depois de ela ser carregada a primeira vez o blog vai apenas repeti-la, enquanto que se usaram uma só imagem para ocupar o fundo todo irá demorar muito mais tempo a ser carregada e tornar o blog muito pesado.)

background-repeat:
define se a imagem de fundo se vai repetir e como o deve fazer.
As variáveis são:
repeat; - para se repetir em toda a area
no-repeat; – para não se repetir
repeat-x; – para se repetir na horizontal
repeat-y; – para se repetir na vertical

backgroud-attachment:
define se a imagem de fundo vai ficar fixa ou se vai deslocar com o blog.
As variáveis são:
fixed; – para fixar a imagem
scroll; – para a imagem se deslocar (por defeito)

background-position:
define onde a imagem inicial se irá localizar quer seja na vertical, quer na horizontal. Para isso são usadas duas posições seguidas sendo a primeira para definir a posição vertical e a segunda a horizontal.
As variáveis são:
top; - para iniciar no topo (condição vertical)
bottom; - para iniciar no fundo (condição vertical)
left; - para iniciar alinhado á esquerda (condição horizontal)
right; para iniciar alinhado á direita (condição horizontal)
center; - para centrar a imagem (vertical e horizontal)
Ex: background-position: top center; (a imagem irá ficar encostada ao topo e centrada na horizontal)

Todas estas propriedades podem ser compiladas numa linha só e como exemplo vou mostrar como fica o estiilo para uma imagem encostada ao topo, alinhada à esqueda e a repetir-se na vertical, como a cor de fundo vermelha e que não se desloque com o blog:

background: #CC0000 url(‘ENDEREÇO DA IMAGEM’) top left repeat-y fixed;

Como podem ver, estão todas as variaveis inseridas apenas numa linha.