Propriedade CSS background - Parte 2

Colaboração: Maurício (Maujor) Samy Silva

Data de Publicação: 05 de fevereiro de 2018

Introdução

A propriedade CSS background destina-se a definir uma cor e uma ou mais imagens de fundo para os boxes CSS. Por padrão a cor do fundo é transparente e nenhuma imagem é aplicada como fundo.

Essa propriedade não é herdada, contudo convém notar que se for definida para um elemento container, seus elementos-filhos por terem um fundo transparente por padrão, mostrarão o fundo definido para o elemento-pai.

Propriedades individuais para background

A propriedade CSS background é uma maneira abreviada de se definir várias propriedades individuais para o fundo dos boxes. Tais propriedades são listadas a seguir.

• background-color
• background-image
• background-repeat
• background-attachement
• background-position
• background-clip
• background-origin
• background-size
• background

Propriedade background-image

Nessa dica mostraremos as 8 propriedades CSS destinadas a definir imagens de fundo.

Finalidade

A finalidade de cada propriedade é conforme descrita a seguir:

1. background-image: define uma imagem de fundo;
2. background-repeat: define a maneira como a imagem de fundo é posicionada;
3. background-attachment: define se a imagem de fundo "rola" ou não com a tela;
4. background-position: define como e onde a imagem de fundo é posicionada;
5. background-clip: define a área do box onde a imagem de fundo é aplicada;
6. background-origin: define a posição de origem da imagem no box;
7. background-size: define as dimensões da imagem no box;
8. background: maneira abreviada para declarar todas as propriedades anteriores.

Valores

Os valores CSS válidos para cada propriedade são conforme relacionado a seguir:

1. background-image: none (default) – url(caminho para o arquivo da imagem) – linear-gradient() – radial-gradient();
2. background-repeat: repeat (defaul) – repeat-y – repeat-x – no-repeat – space – round;
3. background-attachment: scroll (default) – fixed – local;;
4. background-position: coordenadas X e Y da imagem
5. background-clip: border-box (default) – padding-box – content-box;
6. background-origin: border-box (default) – padding-box – content-box;
7. background-size: auto (default) – dimensão CSS – contain – cover;
8. background: (exemplo): # fff url() repeat-x fixed 20px 40px border-box content-box contain.

Exemplos

Sobre o autor

Maurício Samy Silva também conhecido como "Dinossauro das CSS" ou simplesmente Maujor® é graduado em Engenharia Civil pelo Instituto Militar de Engenharia (IME).

No segundo semestre de 2003, com a pretensão de suprir a falta de material de consulta gratuita, em língua portuguesa, na internet, decidiu criar o site de tutoriais denominado Maujor, hospedado em http://www.maujor.com/ e destinado a divulgar as técnicas de desenvolvimento frontend. Maujor é autor de 16 livros de desenvolvimento web. Visite o site dos livros em http://livrosdomaujor.com.br.

Saiba mais: Facebook , Twitter.