Propriedade CSS background - Parte 1

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

Data de Publicação: 28 de novembro de 2017

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-color

Nessa dica mostraremos a definição de cores de fundo.

A sintaxe CSS para definir uma cor de fundo consiste em se declarar o valor desta propriedade com uso de qualquer uma das sintaxes CSS para cores, conforme os exemplos mostrados a seguir.

  1. seletor { background-color: red; }   
  2. seletor { background-color: #f00; } 
  3. seletor { background-color: rgb(255, 0, 0) } 
  4. seletor { background-color: rgb(100%, 0%, 0%) } 
  5. seletor { background-color: rgba(255, 0, 0, 1) } 
  6. seletor { background-color: hsl(0, 100%, 50%) } 
  7. seletor { background-color: hsla(0, 100%, 50%, 0.8) }
  8. seletor { background-color: transparent) }

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.