você está aqui: Home  → Arquivo de Mensagens

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

Exemplo 1 - background-repeat

Exemplo 2 - background-position

Exemplo 3 - background-clip

Exemplo 4 - backgroundorigin

Exemplo 5 - background-size

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.



Veja a relação completa dos artigos de Maurício (Maujor) Samy Silva

 

 

Opinião dos Leitores

Seja o primeiro a comentar este artigo
*Nome:
Email:
Me notifique sobre novos comentários nessa página
Oculte meu email
*Texto:
 
  Para publicar seu comentário, digite o código contido na imagem acima
 


Powered by Scriptsmill Comments Script