Cor de fundo no CSS: background-color em páginas e divs

Como definir uma cor de fundo

background-color preenche a caixa de um elemento com uma cor, incluindo o padding e a área embaixo da borda. Ela aceita qualquer cor CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background color</title>
  <style>
    body { font-family: system-ui, sans-serif; background-color: #f3f4f6; }
    .card { background-color: #ffffff; padding: 16px; border-radius: 8px; margin-bottom: 12px; }
    .notice { background-color: #fef3c7; padding: 12px 16px; }
    mark { background-color: #bbf7d0; }
  </style>
</head>
<body>
  <div class="card">A white card on a light gray page.</div>
  <div class="notice">An amber notice.</div>
  <p>A <mark>highlighted phrase</mark> inside a sentence.</p>
  <p><span style="background-color: #2563eb; color: white; padding: 2px 6px;">inline style</span></p>
</body>
</html>

A cor da página é definida no body, o card e o aviso nas respectivas divs, e o destaque em um elemento inline. Elementos inline recebem fundo só atrás do texto, linha por linha.

Cor de fundo da página inteira

Coloque background-color no body. Se o elemento <html> não tem fundo próprio, o navegador pinta o fundo do body na janela inteira, mesmo onde o conteúdo do body termina:

body {
  background-color: #111827;
  color: #f9fafb; /* change the text color too, for contrast */
}

O jeito antigo do HTML era <body bgcolor="black">. O atributo bgcolor está obsoleto em todos os elementos, então use CSS. Os navegadores ainda o respeitam em páginas antigas, e é por isso que ele pode parecer funcionar.

Fundos transparentes

Todo elemento começa com background-color: transparent, então você vê o pai atrás dele. Para tingir uma caixa e ainda enxergar através dela, use uma cor com canal alfa:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transparent background</title>
  <style>
    body {
      font-family: system-ui, sans-serif; font-weight: 600; padding: 12px;
      background: repeating-linear-gradient(45deg, #bfdbfe 0 12px, #ffffff 12px 24px);
    }
    .box { padding: 16px; margin-bottom: 10px; color: #111827; }
    .none { background-color: transparent; border: 2px dashed #111827; }
    .tint { background-color: rgb(245 158 11 / 50%); }
    .solid { background-color: rgb(245 158 11); }
  </style>
</head>
<body>
  <div class="box none">transparent (the default)</div>
  <div class="box tint" id="tint">rgb(245 158 11 / 50%)</div>
  <div class="box solid">rgb(245 158 11)</div>
</body>
</html>

opacity: 0.5 também deixaria as listras aparecerem, mas esmaece o texto junto. Para um fundo transparente com texto sólido, use uma cor com alfa. A página de cores lista todas as formas de escrever uma.

Onde a cor é pintada

Por padrão, o fundo vai até a borda externa da borda (por isso ele aparece através de uma borda tracejada ou semitransparente). background-clip muda isso:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>background-clip</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .box {
      display: inline-block; margin: 6px; padding: 16px;
      border: 8px dashed #111827;
      background-color: #f59e0b;
    }
    .padding { background-clip: padding-box; }
    .content { background-clip: content-box; }
  </style>
</head>
<body>
  <div class="box">border-box</div>
  <div class="box padding">padding-box</div>
  <div class="box content">content-box</div>
</body>
</html>

Na primeira caixa, o âmbar aparece entre os traços. Na segunda, ele para na borda interna da borda, e na terceira só a área de conteúdo é colorida. A margin nunca é pintada: ela é sempre transparente.

Linhas de tabela listradas

Um fundo em linhas alternadas deixa tabelas largas mais fáceis de percorrer com os olhos:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Striped rows</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; width: 100%; }
    th, td { padding: 8px 12px; text-align: start; }
    thead { background-color: #1f2937; color: white; }
    tbody tr:nth-child(even) { background-color: #f3f4f6; }
    tbody tr:hover { background-color: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <thead><tr><th>Name</th><th>Role</th></tr></thead>
    <tbody>
      <tr><td>Ada</td><td>Engineer</td></tr>
      <tr><td>Grace</td><td>Admiral</td></tr>
      <tr><td>Alan</td><td>Mathematician</td></tr>
      <tr><td>Katherine</td><td>Physicist</td></tr>
    </tbody>
  </table>
</body>
</html>

background-color vs o shorthand background

background define todas as propriedades de fundo de uma vez. Qualquer parte que você deixar de fora volta ao padrão, e isso pega muita gente de surpresa:

.hero {
  background-image: linear-gradient(#2563eb, #1e40af);
  background: #111827;          /* also resets background-image to none */
}

.hero {
  background-image: linear-gradient(#2563eb, #1e40af);
  background-color: #111827;    /* only the color; the gradient stays */
}

Use background-color quando você quer só a cor. Use background quando estiver definindo o fundo inteiro em um lugar só, muitas vezes uma cor mais uma imagem; veja background-image.

Acessibilidade: combine com a cor do texto

Uma cor de fundo só é legível junto com a cor do texto. Sempre que definir uma, confira a outra: a WCAG pede uma razão de contraste de pelo menos 4.5:1 para o texto do corpo. Fundos escuros precisam de texto claro definido explicitamente, porque o texto mantém a cor escura que herda.

Erros comuns

• Usar bgcolor. Está obsoleto. Use background-color.
• Usar opacity para um fundo transparente. Ela esmaece o conteúdo também. Use uma cor com alfa.
• Um shorthand background depois de um background-image. Ele zera a imagem. Escreva background-color.
• Esperar que a margin mostre a cor. A margin fica fora do fundo. Use padding para um espaço colorido.
• Um fundo escuro com o texto padrão. Defina também um color claro.