# Fundos em CSS: cores, gradientes e imagens em camadas

[Canonical HTML page](https://gradiently.design/pt-br/guide/css-background-image)

Uma única propriedade pode guardar uma foto, um tom por cima dela, uma luz suave no canto e uma cor de reserva embaixo. Quando a ordem das camadas faz sentido, a maioria dos efeitos de fundo cabe numa linha.

## The short version

- A propriedade background do CSS pode guardar várias camadas separadas por vírgula, e a primeira camada da lista é pintada por cima.
- Uma cor de fundo só pode ser definida uma vez, na última camada, e aparece embaixo de todas as imagens e gradientes.
- No atalho background, background-size precisa vir depois de background-position com uma barra, como em center / cover.
- Colocar uma camada de gradiente acima de uma camada de imagem numa única declaração é o jeito mais simples de tingir uma foto para o texto ficar legível.
- Imagens definidas no CSS são descobertas mais tarde do que elementos img, então uma imagem de hero importante pode precisar de um preload.

Um **fundo em CSS** é uma pilha de camadas num elemento. A propriedade `background` aceita uma lista de imagens e gradientes separados por vírgula, pintados com o primeiro por cima, mais uma única cor lá embaixo. Isso é tudo de que você precisa para uma foto de hero tingida, uma luz suave sobre um gradiente ou uma textura sobre a cor da marca, sem elementos extras nem wrappers. O resto é saber como o atalho lê os valores.

## O atalho background, valor por valor

O atalho define até oito propriedades individuais de uma vez. As que você deixa de fora voltam ao valor padrão, o que é a causa mais comum dos bugs do tipo “por que o tamanho do meu fundo sumiu”.

| Propriedade individual | O que controla | Valores comuns |
| --- | --- | --- |
| `background-color` | A cor embaixo de todas as camadas | `#0f0b1e`, `oklch(20% 0.05 290)` |
| `background-image` | Imagens e gradientes, separados por vírgula | `url(photo.webp)`, `linear-gradient(…)` |
| `background-position` | Onde cada camada fica | `center`, `top right`, `50% 30%` |
| `background-size` | O tamanho de cada camada | `cover`, `contain`, `200px auto` |
| `background-repeat` | Se ela se repete como ladrilho | `no-repeat`, `repeat`, `repeat-x` |
| `background-attachment` | Se rola com o elemento ou com a viewport | `scroll`, `fixed`, `local` |
| `background-origin` e `background-clip` | De qual caixa começa e em qual é cortada | `padding-box`, `border-box`, `text` |

Referência completa na [página de background do MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background).

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

A barra é obrigatória: o tamanho só pode aparecer logo depois da posição. A cor vem por último e aparece enquanto a imagem carrega.

## Como as camadas de fundo se empilham

Liste as camadas de cima para baixo, separadas por vírgula. Cada camada pode ter sua própria posição, tamanho e repetição, informados na mesma ordem em cada propriedade individual. Só a última camada pode incluir uma cor. Pense nisso como olhar de cima para baixo através de uma pilha de papel vegetal.

- Camada 1: luz rosa: `radial-gradient(circle at 80% 20%, #f472b6 0%, transparent 45%)`
- Camada 2: luz azul: `radial-gradient(circle at 15% 85%, #38bdf8 0%, transparent 50%)`
- Camada 3: base índigo: `linear-gradient(160deg, #1e1b4b 0%, #0f0b1e 100%)`

Três camadas mostradas sozinhas. As duas primeiras desaparecem em transparente, então a base aparece onde elas não pintam.

```css
.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;
}
```

As mesmas três camadas empilhadas numa declaração, a de cima primeiro, com uma cor sólida de reserva embaixo.

Use `transparent` nas paradas externas para que as luzes se misturem ao que estiver embaixo. Para as formas em si, veja [radial gradient em CSS](https://gradiently.design/pt-br/guide/css-radial-gradient) e [mesh gradient em CSS](https://gradiently.design/pt-br/guide/css-mesh-gradient).

## Um gradiente sobre uma imagem de fundo

O fundo em camadas mais útil tinge uma foto para que as palavras por cima possam ser lidas. Coloque uma camada de gradiente primeiro e a imagem depois. Um gradiente escuro onde fica o texto e transparente no resto preserva muito mais da foto do que uma sobreposição escura chapada.

```css
.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;
}
```

Escuro à esquerda, onde fica o título, transparente à direita, onde a foto deve ser vista.

Um hero largo de site com um título sobre um fundo escurecido por igual

Uma sobreposição chapada deixa o texto legível escurecendo tudo por igual.

O mesmo hero em que só o lado atrás do título fica mais calmo e escuro

Uma camada direcional escurece só onde estão as palavras e deixa o resto da cena claro.

[Sobreposição em gradiente](https://gradiently.design/pt-br/guide/gradient-overlay) traz mais receitas de sobreposição, e [texto sobre imagem](https://gradiently.design/pt-br/guide/text-over-image) explica quando mover as palavras em vez de escurecer a imagem.

## background-size, position e repeat

- `cover` preenche a caixa e corta o que transborda. Certo para fotos e heros sangrados.
- `contain` encaixa a imagem inteira dentro e deixa espaços. Certo para logos e ilustrações que não podem ser cortados.
- Combine `cover` com um `background-position` intencional, como `50% 30%`, para que o corte mantenha à vista o rosto da pessoa ou o produto.
- Ladrilhos de textura pedem `repeat` e um tamanho fixo, por exemplo `200px 200px`, para que a granulação fique igual em qualquer largura de tela.
- `background-attachment: fixed` cria um efeito parallax no desktop, mas muitos navegadores de celular o ignoram, então nunca dependa dele.

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

Um pequeno ladrilho de granulação repetido sobre um gradiente quente. As configurações de cada camada vêm depois de cada imagem, então o tamanho do ladrilho não afeta o gradiente.

Mais uma propriedade individual merece seu lugar: `background-clip: text` corta o fundo no formato das letras, e é assim que se faz texto em gradiente no CSS. Reserve para palavras grandes de destaque, defina uma `color` sólida de reserva e veja [texto em gradiente com CSS](https://gradiently.design/pt-br/guide/css-gradient-text) para o padrão completo.

## Erros para evitar

### Evite

- Definir `background-size` e depois o atalho, que o redefine
- Uma cor em qualquer camada que não seja a última
- Nenhuma cor de reserva, deixando o texto ilegível enquanto a imagem carrega
- Uma foto enorme para uma caixa de 400 pixels de largura
- Conteúdo importante só numa imagem de fundo, invisível para leitores de tela

### Faça

- Escreva o atalho primeiro e depois as propriedades que o sobrescrevem
- Uma cor, no fim da lista
- Uma cor de reserva próxima do tom médio da imagem
- Imagens no tamanho da caixa, servidas em WebP ou AVIF
- Imagens com significado como `img` com texto alternativo; decoração como fundo

## Imagens de fundo responsivas e rápidas

`image-set()` deixa o navegador escolher entre formatos ou resoluções, mais ou menos como o `srcset` num `img`. E como as imagens de fundo só são descobertas depois que o CSS é processado, o fundo de um hero pode chegar atrasado; um preload no `head` resolve isso.

```html
<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>
```

O navegador usa o primeiro formato que suporta. O preload garante que a imagem principal comece a baixar cedo.

Muitas vezes o fundo mais rápido é nenhuma imagem. Gradientes em camadas não custam download, e um pequeno ladrilho de granulação acrescenta textura por poucos kilobytes. [Desempenho de gradientes CSS](https://gradiently.design/pt-br/guide/css-gradient-performance) e [WebP vs PNG e JPG](https://gradiently.design/pt-br/guide/webp-images) explicam os prós e contras. Se você prefere não ajustar luz e granulação à mão, um Mark do Gradiently entrega um fundo pronto e marcante no tamanho de hero de site de 1920×1080, com o mesmo visual dos seus posts nas redes.

## FAQ

### Como adiciono uma imagem de fundo no CSS?

Use `background: url("image.webp") center / cover no-repeat;` no elemento, com uma cor de reserva no fim caso a imagem demore a carregar.

### Como coloco um gradiente sobre uma imagem de fundo?

Liste o gradiente primeiro e a imagem depois numa única declaração `background`, separados por vírgula. A primeira camada é pintada por cima.

### Posso usar vários fundos no CSS?

Sim. Separe as camadas com vírgulas; cada uma pode ter sua própria posição, tamanho e repetição, e só a última pode incluir uma cor.

### Qual a diferença entre background-size cover e contain?

`cover` preenche o elemento inteiro e corta o que sobra; `contain` mostra a imagem inteira e pode deixar espaço vazio em volta.

### Por que meu background-size para de funcionar?

O atalho `background` redefine todas as propriedades individuais que não menciona. Defina `background-size` depois do atalho, ou inclua no atalho depois da posição com uma barra.