Fundos CSS: cores, gradientes e imagens em camadas

Um fundo CSS é uma pilha de camadas num só elemento. A propriedade background aceita uma lista de imagens e gradientes separados por vírgulas, pintados com o primeiro por cima, mais uma única cor mesmo no fundo. É tudo o que precisas para uma fotografia de herói com tom, uma luz suave sobre um gradiente ou uma textura sobre uma cor de marca, sem elementos extra nem invólucros. O resto é saber como a forma abreviada lê os valores.

A forma abreviada de background, valor a valor

A forma abreviada define até oito propriedades individuais de uma vez. As que omitires voltam aos valores predefinidos, que é a origem mais comum dos erros do tipo “porque desapareceu o tamanho do meu fundo”.

.hero {
  /* image | position / size | repeat | colour */
  background: url("harbour.webp") center 30% / cover no-repeat #0f172a;
}

Como se empilham as camadas de fundo

Lista as camadas de cima para baixo, separadas por vírgulas. Cada camada pode ter a sua posição, tamanho e repetição, dados pela mesma ordem em cada propriedade individual. Só a última camada pode incluir uma cor. Pensa nisso como ler através de uma pilha de papel vegetal.

.section {
  background:
    radial-gradient(circle at 80% 20%, #f472b6 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, #38bdf8 0%, transparent 50%),
    linear-gradient(160deg, #1e1b4b 0%, #0f0b1e 100%)
    #0f0b1e;
}

Usa transparent nas paragens exteriores para que as luzes se misturem com o que estiver por baixo. Para as formas em si, vê o gradiente radial em CSS e o gradiente de malha em CSS.

Um gradiente sobre uma imagem de fundo

O fundo em camadas mais útil dá um tom a uma fotografia para que as palavras por cima se leiam. Põe uma camada de gradiente primeiro e a imagem em segundo. Um gradiente que é escuro onde o texto está e transparente no resto conserva muito mais da fotografia do que uma sobreposição escura uniforme.

.hero {
  background:
    linear-gradient(90deg, rgb(10 12 24 / 0.85) 0%, rgb(10 12 24 / 0.4) 45%, transparent 70%),
    url("terrace.webp") center / cover no-repeat
    #0a0c18;
  color: #f8fafc;
}

A sobreposição de gradiente tem mais receitas de sobreposição, e o texto sobre imagem explica quando mover as palavras em vez de escurecer a imagem.

background-size, posição e repetição

• cover preenche a caixa e corta o que sobra. Certo para fotografias e heróis de largura total.
• contain encaixa a imagem inteira dentro e deixa espaços. Certo para logótipos e ilustrações que não devem ser cortados.
• Combina cover com um background-position deliberado como 50% 30%, para que o corte mantenha à vista o rosto do sujeito ou o produto.
• As texturas em mosaico querem repeat e um tamanho fixo, por exemplo 200px 200px, para o grão se manter igual em todas as larguras de ecrã.
• background-attachment: fixed cria um efeito de paralaxe no ambiente de trabalho, mas muitos navegadores móveis ignoram-no, por isso nunca dependas dele.

.card {
  background:
    url("grain.png") 0 0 / 200px 200px repeat,
    linear-gradient(135deg, #7c2d12 0%, #ea580c 55%, #fdba74 100%);
}

Mais uma propriedade individual merece o seu lugar: background-clip: text corta o fundo à forma das letras, que é como se faz letra com gradiente em CSS. Guarda-a para palavras de destaque grandes, define uma color sólida de reserva e vê o texto com gradiente em CSS para o padrão completo.

Erros a evitar

Imagens de fundo responsivas e rápidas

O image-set() deixa o navegador escolher entre formatos ou resoluções, tal como o srcset num img. E, como as imagens de fundo só são descobertas depois de o CSS ser analisado, um fundo de herói pode chegar tarde; uma dica de pré-carregamento no head resolve isso.

<link rel="preload" as="image" href="/hero-1920.avif" type="image/avif" fetchpriority="high">

<style>
  .hero {
    background: image-set(
      url("/hero-1920.avif") type("image/avif"),
      url("/hero-1920.webp") type("image/webp"),
      url("/hero-1920.jpg") type("image/jpeg")
    ) center / cover no-repeat #0f172a;
  }
</style>

Muitas vezes o fundo mais rápido é nenhuma imagem. Os gradientes em camadas não custam descarga, e um pequeno mosaico de grão acrescenta textura por alguns quilobytes. O desempenho dos gradientes em CSS e o WebP face a PNG e JPG tratam dos compromissos. Se preferires não afinar à mão a luz e o grão, um Mark do Gradiently dá-te um fundo acabado e distintivo ao tamanho de herói de site de 1920×1080, com o mesmo aspeto das tuas publicações sociais.