Propriedade background-color: Preenchendo o fundo

Depois de aprender a colorir o texto com a propriedade color, o próximo passo lógico é aprender a colorir o "papel" onde esse texto está escrito. É para isso que serve a propriedade background-color.

A propriedade background-color define a cor de fundo de um elemento HTML. Ela preenche a área do conteúdo, o padding e a borda do elemento.

Pense na propriedade background-color como a tinta que você usa para pintar a parede de um cômodo. Ela muda a cor da parede, mas não afeta a cor dos objetos que estão dentro do cômodo.

Como usar a propriedade background-color

A sintaxe é muito similar à da propriedade color: você seleciona o elemento que deseja estilizar e aplica a propriedade background-color com o valor da cor desejada.

Sintaxe:

seletor {
  background-color: valor-da-cor;
}

O valor-da-cor pode ser qualquer um dos formatos que você já conhece:

• Nomes de Cores: red, blue, green, white, black, etc.
• Hexadecimal: #FF0000, #336699, #CCC, etc.
• RGB/RGBA: rgb(255, 0, 0), rgba(0, 0, 0, 0.5), etc.
• HSL/HSLA: hsl(0, 100%, 50%), hsla(240, 50%, 50%, 0.8), etc.
• transparent: Um valor especial que torna o fundo completamente transparente (é o valor padrão).

Exemplos Práticos:

Considere o seguinte HTML:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Propriedade Background-Color</title>
  <style>
    /* Aqui vamos definir o CSS */
  </style>
</head>
<body>
  <header>
    <h1>Meu Site</h1>
  </header>
  <main>
    <section class="info-box">
      <p>Esta é uma caixa de informação.</p>
    </section>
    <section class="alerta">
      <p>Atenção: Mensagem de alerta!</p>
    </section>
    <button>Clique aqui</button>
  </main>
  <footer>
    <p>Rodapé do site.</p>
  </footer>
</body>
</html>

Agora, vamos aplicar diferentes cores de fundo:

/* Define um fundo escuro para o cabeçalho */
header {
  background-color: #333;
  color: white; /* Para garantir que o texto seja legível no fundo escuro */
  padding: 15px;
}

/* Define um fundo suave para a caixa de informação */
.info-box {
  background-color: lightblue;
  padding: 20px;
  margin-bottom: 10px;
}

/* Define um fundo chamativo para a seção de alerta */
.alerta {
  background-color: rgb(255, 200, 0); /* Um amarelo alaranjado */
  padding: 15px;
  border: 1px solid orange;
}

/* Define um fundo para o botão */
button {
  background-color: hsl(240, 70%, 50%); /* Um azul vibrante */
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

/* Define um fundo para o rodapé */
footer {
  background-color: rgba(0, 0, 0, 0.8); /* Preto com 80% de opacidade */
  color: white;
  padding: 10px;
  margin-top: 20px;
}

Resultado:

• O <header> terá um fundo cinza escuro.
• A .info-box terá um fundo azul claro.
• A .alerta terá um fundo amarelo alaranjado.
• O <button> terá um fundo azul vibrante.
• O <footer> terá um fundo preto semitransparente.

background-color e o Box Model

É importante lembrar como background-color interage com o Box Model de um elemento. A cor de fundo se estende por:

• Área de Conteúdo: Onde o texto e outras mídias do elemento estão.
• Padding: O espaçamento interno do elemento.
• Borda: A linha que circunda o padding e o conteúdo.

A background-color não se estende para a área de margin (margem externa). A margem é sempre transparente, revelando o fundo do elemento pai ou do documento.

[[google images: CSS background-color box model]]

Boas Práticas e Contraste

• Contraste com o Texto: Assim como na propriedade color, é crucial garantir um bom contraste entre a background-color e a color do texto que está sobre ela. Isso garante legibilidade e acessibilidade.
• Consistência: Use uma paleta de cores de fundo consistente para manter a identidade visual do seu site.
• Transparência: Utilize rgba() ou hsla() para criar fundos semitransparentes, o que pode adicionar profundidade e modernidade ao design, permitindo que o conteúdo por trás seja parcialmente visível.

A propriedade background-color é fundamental para criar seções visuais distintas, destacar elementos e dar vida ao layout da sua página. Combinada com a propriedade color, você tem o controle total sobre a aparência de texto e fundo.