Backgrounds

A propriedade background define as características (os valores na regra CSS) do fundo dos elementos HTML.

background-color

Altera a cor do fundo de um elemento HTML. Alguns valores válidos para esta propriedade são:

• código hexadecimal: #FFFFFF

• código rgb: rgb(255,235,0)

• nome da cor: red, blue, green, etc

body {
    background-color: #b0c4de;
}

background-image

Especifica uma imagem para ser usada como plano de fundo de um elemento HTML. Esta propriedade pode ser usada da seguinte maneira:

body {
    background-image: url("imagem.gif");
}

background-repeat

Por padrão, a imagem de fundo é repetida verticalmente e horizontalmente no seletor.

Para determinar que a imagem será repetida apenas na horizontal utiliza-se o valor repeat-x para a propriedade background-repeat:

body {
    background-image: url("imagem.png");
    background-repeat: repeat-x;
}

Para determinar que a imagem será repetida apenas na horizontal utiliza-se o valor repeat-y:

background-repeat: repeat-x;

Para determinar que a imagem não será repetida, utiliza-se o valor no-repeat para a propriedade background-repeat:

body {
    background-image: url("imagem.png");
    background-repeat: no-repeat;
}

background-position

Especifica a posição inicial da imagem no seletor. Pode assumir os seguintes valores:

• left top

• left center

• left bottom

• right top

• right center

• right bottom

• center top

• center center

• center bottom

body {
    background-image: url("imagem.png");
    background-repeat: no-repeat;
    background-position: right top;
}

Obs.: top (parte superior), bottom (parte inferior),center (centro), left (esquerda) e right (direita).

Pode-se também utilizar pixel (px) ou porcentagem (%) para indicar a posição da imagem.

background-attachment

Define se a imagem de fundo será fixa ou rolará junto com o resto da página. Pode assumir os seguintes valores:

• fixed: imagem fixa na tela

• scroll: imagem vai rolar com a tela

Obs.: o valor padrão é scroll.

body {
    background-image: url('imagem.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Forma abreviada de se utilizar as propriedades de background

Esta é a maneira abreviada de se escrever uma regra para as propriedades do fundo. Pode-se declarar todas ou algumas das propriedades estudadas em uma regra única.

Ao usar a propriedade abreviada a ordem dos valores é:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

Exemplo:

body {
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}