CSS parte 2 – As propriedades de background

Bom pessoal, nesta segunda parte vou postar sobre as propriedades de background. Elas são utilizadas para personalização do fundo dos elementos. Ao total são 5:

- background-color
- background-image
- background-repeat
- background-attachment
- background-position

Abaixo exemplos da utilização de cada uma destas propriedades e os valores que podem ser atribuídos:

BACKGROUND-COLOR:

Pode ser utilizada para personalizar a cor de fundo do elemento. Os valores que lhe podem ser atribuídos são:

- Cores em código hexadecimal: #FFFFFF
- Cores em código RGB: rgb(255,235,0)
- Nome da cor: yellow, black, green, red e etc
- Transparente: transparent

Um exemplo de alteração da cor de fundo de um parágrafo:

Parágrafo com o fundo amarelo

Este efeito acima é resultado da seguinte folha de estilo:

p{
background-color: yellow;
}

BACKGROUND-IMAGE:

Possibilita inserir uma imagem de fundo no elemento. O único valor que lhe deve ser atribuído é a URL da imagem.

Sua sintaxe é:

body{
background-image: url(caminho/imagem.jpg);
}

BACKGROUND-REPEAT:

Define a maneira de repetição para o fundo. Os valores que lhe podem ser atribuídos são:

- no-repeat
- repeat
- repeat-y
- repeat-x

Ao utilizar “no-repeat”, a imagem de fundo aparece somente uma vez sem se repetir conforme a imagem abaixo:

Ao utilizar “repeat”, a imagem de fundo se repete por toda parte no elemento:

Ao utilizar “repeat-y”, a imagem de fundo se repetirá no eixo Y, ou seja, na vertical:

Ao utilizar “repeat-x”, a imagem de fundo se repetirá no eixo X, ou seja, na horizontal:

BACKGROUND-POSITION:

Define a forma de posicionamento da imagem no fundo do elemento. Os valores que lhe podem ser atribuídos são:

- top left (Posicionado no topo a esquerda)
- top center (Posicionado no topo e centralizado)
- top right (Posicionado no topo a direita)
- center center (Posicionado no centro)
- center left (Posicionado no centro a esquerda)
- center right (Posicionado no centro a direita)
- bottom left (Posicionado no fundo a esquerda)
- bottom center (Posicionado no fundo e centralizado)
- bottom right (Posicionado no fundo a direita)

BACKGROUND-ATTACHMENT:

Define o modo de comportamento da imagem de fundo. Os valores que lhe podem ser atribuídos são:

- fixed
- scroll

Ao definir “fixed”, a imagem de fundo ficará fixada na tela. O exemplo poderá ser visto neste site e também neste (reparem que ao “rolar” a página o fundo permance fixo).

Já com “scroll”, a imagem de fundo acompanhará a rolagem, como acontece na maioria dos sites. Exemplos: aqui e aqui.

Até a próxima!