Backgrounds: Imagens, Gradientes e Múltiplos

Background é tudo que fica atrás do conteúdo: cor sólida, imagem, gradiente, ou uma combinação. A propriedade background é um atalho que reúne várias - é a forma mais comum de uso, mas conhecer as partes ajuda a debugar.

background-color: a cor sólida

.caixa { background-color: #1a73e8; }

Simples e direto. Aceita qualquer formato de cor (nome, hex, rgb, hsl). Diferente de color, que é a cor do texto, essa é a cor do fundo.

background-image: uma ou várias imagens

.hero { background-image: url("fundo.jpg"); }

A imagem precisa estar no mesmo servidor (ou com CORS liberado). O tamanho padrão é o "natural" da imagem. Se ela for menor que o elemento, ela repete (tile) - controlado por background-repeat.

background-repeat: o padrão é repetir

.logo {
  background-image: url("logo.png");
  background-repeat: no-repeat;   /* não repete */
  /* ou: repeat-x, repeat-y, repeat, space, round */
}

Quase sempre você quer no-repeat. Use repeat-x/repeat-y para faixas (uma textura que se repete horizontalmente, por exemplo).

background-size: o tamanho da imagem

.hero {
  background-image: url("hero.jpg");
  background-size: cover;      /* cobre tudo, cortando se precisar */
  /* ou: contain (cabe inteiro, com possíveis bordas vazias) */
  /* ou: 100% 100% (estica, pode distorcer) */
  background-position: center;  /* centraliza */
}

• cover: a imagem cobre toda a área. Se a proporção for diferente, corta o excesso. Padrão para hero/banner.
• contain: a imagem inteira aparece, sem cortes. Pode sobrar espaço vazio. Bom para logos ou ilustrações decorativas.
• Valores fixos: background-size: 300px 200px ou 100% auto.

background-position: onde a imagem fica

.div {
  background-image: url("icone.svg");
  background-repeat: no-repeat;
  background-position: right bottom; /* canto inferior direito */
  background-size: 24px 24px;
}

Aceita palavras-chave (top, right, center, bottom, left) ou valores (50% 50%, 0 0). center é o que você mais vai usar.

background-attachment: parado ou rola junto?

.hero {
  background-image: url("parallax.jpg");
  background-attachment: fixed; /* fica parado enquanto a página rola */
}

• scroll (default): rola junto com a página.
• fixed: fica "preso" à viewport, dá o efeito parallax clássico.
• local: rola junto com o conteúdo do próprio elemento (útil em áreas com scroll interno).

Cuidado: fixed tem performance ruim no mobile e pode causar problemas de acessibilidade (pessoas com sensibilidade a movimento).

Gradientes: cores se misturando

Você não precisa de uma imagem pra ter um fundo bonito. CSS tem gradientes nativos:

.degrade {
  background: linear-gradient(to right, #1a73e8, #6f42c1);
}

linear-gradient(ângulo, cor1, cor2, ...) faz uma transição suave entre cores em linha reta. O ângulo pode ser uma direção (to right, to bottom right) ou graus (45deg, 180deg).

.gradiente {
  background: linear-gradient(45deg, #ff7e5f, #feb47b);
  /* sunset clássico */
}

Várias paradas de cor:

.bandeira {
  background: linear-gradient(to bottom, #009c3b 0%, #009c3b 50%, #ffdf00 50%, #ffdf00 100%);
}

radial-gradient faz o degrade em círculos, do centro pra fora:

.spot {
  background: radial-gradient(circle, white, #1a73e8);
}

conic-gradient faz o degrade em arco (como uma pizza), útil para gráficos de pizza em CSS puro e efeitos psicodélicos.

Empilhando múltiplos backgrounds

Você pode combinar vários backgrounds em uma única propriedade. A ordem é: o primeiro fica na frente, o último fica no fundo.

.banner {
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("foto.jpg") center / cover no-repeat;
}

Esse é o clássico "texto branco em cima de foto escurecida": o gradiente preto semi-transparente fica na frente da foto, escurecendo. Sem precisar editar a imagem em editor.

Shorthand background

Você pode declarar tudo em uma linha. A ordem é flexível, mas o costume é:

.elemento {
  background: <color> <image> <position> / <size> <repeat> <attachment> <origin> <clip>;
}

.hero {
  background: #1a73e8 url("hero.jpg") center / cover no-repeat;
}

• background-color: cor sólida.
• background-image: uma ou várias imagens (separadas por vírgula).
• background-size: cover, contain, ou valores fixos.
• background-position: onde fica.
• background-repeat: se repete ou não.
• linear-gradient / radial-gradient / conic-gradient: gradientes sem imagem.
• Vários backgrounds: empilhe separando por vírgula, primeiro na frente.

Dica: o "overlay escuro em cima de imagem" é um dos efeitos mais usados em hero de landing page. Em vez de editar a imagem no Figma, use um gradiente semi-transparente sobre o url(). Mais flexível, mais rápido, mais acessível (a imagem pode ser trocada sem perder o efeito).

No próximo nó, vamos dar profundidade com box-shadow e text-shadow.