Backgrounds

Por trás de cada caixa do Laboratório Belavista há uma camada de fundo: cor, imagem, gradiente, posição e repetição. O fundo pinta a partir da padding box (por padrão) e fica atrás do conteúdo.

O exemplo deste capítulo é 55-backgrounds, no pacote que acompanha o volume. Troque a cor de fundo do hero, preveja, recarregue e confira. Ciclo: ler → digitar → mudar → prever → recarregar → conferir.

O que você vai aprender

• Usar background-color e background-image.
• Controlar background-size, position e repeat.
• Empilhar várias camadas (lista separada por vírgula).
• Ajustar background-clip e origem.
• Preferir contraste legível sobre textura.

Cor e imagem

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Backgrounds — Laboratório Belavista</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header class="hero">
      <h1>Ateliê Belavista</h1>
      <p>Tipografia e cartaz em Recife (conteúdo fictício).</p>
    </header>
    <section class="faixa">
      <h2>Oficina aberta</h2>
    </section>
  </body>
</html>

.hero {
  padding: 3rem 1.5rem;
  color: #fff;
  background-color: #1a3a4a;
  background-image: linear-gradient(120deg, rgba(26, 58, 74, 0.92), rgba(139, 30, 30, 0.75)),
    url("../imagens/papel-textura.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

A primeira imagem da lista fica mais perto do usuário; a cor fica atrás de todas.

Tamanho e posição

• cover — cobre a caixa (pode cortar).
• contain — cabe inteira (pode sobrar faixa).
• Comprimentos/% — controle fino.
• background-position: center top — âncora da arte.

.faixa {
  padding: 2rem 1rem;
  background-color: #f7f4ef;
  background-image: url("../imagens/marca-dagua.svg");
  background-repeat: repeat;
  background-size: 120px;
}

Clip e origem

.titulo-recortado {
  background-image: linear-gradient(90deg, #8b1e1e, #c45c26);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text; /* ainda comum para compatibilidade */
}

background-clip: padding-box (padrão efetivo em muitos casos de pintura) evita que o fundo invada a borda; border-box estende até a borda.

Erro comum: texto claro sobre foto sem véu escuro. Sempre garanta contraste — um linear-gradient semiopaco sobre a imagem resolve no hero.

Atalho

background: #1a3a4a url(...) center / cover no-repeat; — poderoso, fácil de errar a ordem. Prefira propriedades longas enquanto aprende.

Critério para avançar

Você avança se: empilha gradiente + imagem no hero; usa cover com consciência do corte; confere contraste do título.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Em uma lista de background-image, qual camada fica na frente?
2. cover vs contain: qual pode cortar a arte?
3. Por que um gradiente escuro sobre a foto ajuda no hero?

Respostas comentadas

1. A primeira da lista (mais próxima do usuário).
2. cover.
3. Escurece a área atrás do texto e melhora o contraste/legibilidade.