# Fundos CSS: cores, gradientes e imagens em camadas [Canonical HTML page](https://gradiently.design/pt-pt/guide/css-background-image) Uma só propriedade pode conter uma fotografia, um tom por cima, uma luz suave no canto e uma cor de reserva por baixo. Quando a ordem das camadas faz clique, a maioria dos efeitos de fundo cabe numa linha. ## The short version - A propriedade CSS background pode conter várias camadas separadas por vírgulas, e a primeira camada listada é pintada por cima. - Uma cor de fundo só pode ser definida uma vez, na última camada, e aparece por baixo de todas as imagens e gradientes. - Na forma abreviada de background, o background-size tem de vir depois do background-position com uma barra, como em center / cover. - Pôr uma camada de gradiente acima de uma camada de imagem numa só declaração é a forma mais simples de dar um tom a uma fotografia para o texto se ler. - As imagens definidas em CSS são descobertas mais tarde do que os elementos img, por isso uma imagem de herói importante pode precisar de uma dica de pré-carregamento. 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”. | Propriedade individual | O que controla | Valores comuns | | --- | --- | --- | | `background-color` | A cor por baixo de todas as camadas | `#0f0b1e`, `oklch(20% 0.05 290)` | | `background-image` | Imagens e gradientes, separados por vírgulas | `url(photo.webp)`, `linear-gradient(…)` | | `background-position` | Onde fica cada camada | `center`, `top right`, `50% 30%` | | `background-size` | Que tamanho tem cada camada | `cover`, `contain`, `200px auto` | | `background-repeat` | Se se repete em mosaico | `no-repeat`, `repeat`, `repeat-x` | | `background-attachment` | Se se desloca com o elemento ou com a janela | `scroll`, `fixed`, `local` | | `background-origin` e `background-clip` | De que caixa parte e até onde é cortado | `padding-box`, `border-box`, `text` | Referência completa na [página de background da 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 surgir logo a seguir à posição. A cor vem em último e aparece enquanto a imagem carrega. ## 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. - 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: fundo índigo: `linear-gradient(160deg, #1e1b4b 0%, #0f0b1e 100%)` Três camadas mostradas à parte. As duas primeiras desvanecem para transparente, por isso o fundo transparece 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 só declaração, a de cima primeiro, com uma cor sólida de reserva no fundo. 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](https://gradiently.design/pt-pt/guide/css-radial-gradient) e o [gradiente de malha em CSS](https://gradiently.design/pt-pt/guide/css-mesh-gradient). ## 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. ```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, claro à direita, onde a fotografia deve ver-se. Um herói de site largo com um título sobre um fundo escurecido de forma uniforme Uma sobreposição uniforme torna o texto legível escurecendo tudo por igual. O mesmo herói em que só o lado por trás do título é mais calmo e escuro Uma camada direcional escurece só onde estão as palavras e deixa o resto da cena luminoso. A [sobreposição de gradiente](https://gradiently.design/pt-pt/guide/gradient-overlay) tem mais receitas de sobreposição, e o [texto sobre imagem](https://gradiently.design/pt-pt/guide/text-over-image) 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. ```css .card { background: url("grain.png") 0 0 / 200px 200px repeat, linear-gradient(135deg, #7c2d12 0%, #ea580c 55%, #fdba74 100%); } ``` Um pequeno mosaico de grão repetido sobre um gradiente quente. As definições por camada seguem cada imagem, por isso o gradiente não é afetado pelo tamanho do mosaico. 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](https://gradiently.design/pt-pt/guide/css-gradient-text) para o padrão completo. ## Erros a evitar ### Evita - Definir `background-size` e depois a forma abreviada, que o repõe - Uma cor em qualquer camada que não a última - Nenhuma cor de reserva, e por isso texto ilegível enquanto a imagem carrega - Uma fotografia enorme para uma caixa com 400 píxeis de largura - Conteúdo importante só numa imagem de fundo, invisível para leitores de ecrã ### Faz - Escreve primeiro a forma abreviada e só depois as substituições individuais - Uma cor, no fim da lista - Uma cor de reserva próxima do tom médio da imagem - Imagens com o tamanho da caixa, servidas em WebP ou AVIF - Imagens com significado como `img` com texto alternativo; a decoração como fundos ## 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. ```html ``` O navegador escolhe o primeiro formato que suporta. O pré-carregamento garante que a imagem principal começa a descarregar cedo. 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](https://gradiently.design/pt-pt/guide/css-gradient-performance) e o [WebP face a PNG e JPG](https://gradiently.design/pt-pt/guide/webp-images) 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. ## FAQ ### Como acrescento uma imagem de fundo em CSS? Usa `background: url("image.webp") center / cover no-repeat;` no elemento, com uma cor de reserva no fim para o caso de a imagem demorar a carregar. ### Como ponho um gradiente sobre uma imagem de fundo? Lista o gradiente primeiro e a imagem em segundo, numa só declaração `background`, separados por uma vírgula. A primeira camada é pintada por cima. ### Posso usar vários fundos em CSS? Sim. Separa as camadas com vírgulas; cada uma pode ter a sua posição, tamanho e repetição, e só a última camada pode incluir uma cor. ### Qual é a diferença entre background-size cover e contain? `cover` preenche o elemento todo e corta o excedente; `contain` mostra a imagem inteira e pode deixar espaço vazio à volta. ### Porque deixou de funcionar o meu background-size? A forma abreviada `background` repõe todas as propriedades individuais que não menciona. Define `background-size` depois da forma abreviada, ou inclui-o nela a seguir à posição, com uma barra.