Docs executáveis de CSS: Cor de fundo

Q: Como mudar a cor de fundo no HTML?

Use a propriedade CSS background-color. Para a página toda: body { background-color: #f3f4f6; }. Para um elemento: .

Q: O bgcolor ainda é válido no HTML?

Não. O atributo bgcolor em , e está obsoleto no HTML5. Os navegadores ainda o desenham para páginas antigas, mas o jeito certo é background-color no CSS.

Q: Como deixar uma cor de fundo transparente?

Use uma cor com canal alfa, como background-color: rgb(37 99 235 / 20%);. Ao contrário de opacity, isso mantém o texto de dentro totalmente visível.

Q: Qual a diferença entre background e background-color?

background-color define só a cor. background é um shorthand de todas as propriedades de fundo (cor, imagem, posição, tamanho, repetição, attachment, origin e clip), então background: red; também zera qualquer imagem de fundo para none.

Q: Por que a cor de fundo do body preenche a janela inteira?

Quando o elemento não tem fundo próprio, o navegador pinta o fundo do body na tela inteira, mesmo além da caixa do body. Dê um fundo ao html se você precisar que os dois sejam diferentes.

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.

Perguntas frequentes

Como mudar a cor de fundo no HTML?

Use a propriedade CSS background-color. Para a página toda: body { background-color: #f3f4f6; }. Para um elemento: <div style="background-color: #fef3c7;">.

O bgcolor ainda é válido no HTML?

Não. O atributo bgcolor em <body>, <table> e <td> está obsoleto no HTML5. Os navegadores ainda o desenham para páginas antigas, mas o jeito certo é background-color no CSS.

Como deixar uma cor de fundo transparente?

Use uma cor com canal alfa, como background-color: rgb(37 99 235 / 20%);. Ao contrário de opacity, isso mantém o texto de dentro totalmente visível.

Qual a diferença entre background e background-color?

background-color define só a cor. background é um shorthand de todas as propriedades de fundo (cor, imagem, posição, tamanho, repetição, attachment, origin e clip), então background: red; também zera qualquer imagem de fundo para none.

Por que a cor de fundo do body preenche a janela inteira?

Quando o elemento <html> não tem fundo próprio, o navegador pinta o fundo do body na tela inteira, mesmo além da caixa do body. Dê um fundo ao html se você precisar que os dois sejam diferentes.

Conceitos relacionados