CSS: Fundo CSS
Última atualização: 2026-10-13
A estilização de fundo é uma ferramenta importante para embelezar páginas web. O CSS fornece uma série de propriedades de fundo que permitem controlar cores de fundo de elementos, imagens de fundo, repetição de imagens, tamanho e posição.
Referência Rápida de Propriedades de Fundo
| Propriedade | Valores Comuns | Finalidade |
|---|---|---|
background-color |
#f5f5f5, red, rgba(255,0,0,0.3) |
Cor de fundo |
background-image |
url("bg.jpg"), linear-gradient(...) |
Imagem de fundo ou gradiente |
background-repeat |
no-repeat, repeat, repeat-x, repeat-y |
Método de repetição do fundo |
background-position |
center, top left, 50% 50% |
Posição da imagem de fundo |
background-size |
cover, contain, 100% auto |
Tamanho da imagem de fundo |
background-attachment |
scroll, fixed, local |
Se o fundo rola com a página |
background |
#333 url("bg.jpg") no-repeat center |
Abreviação, combina múltiplos |
1. Cor de Fundo
background-color define a cor de fundo do elemento, suportando qualquer valor de cor válido:
▶ Exemplo
▶ Experimente2. Imagem de Fundo
background-image define uma imagem de fundo para elementos:
▶ Exemplo
▶ ExperimenteMúltiplas imagens de fundo podem ser definidas, separadas por vírgulas, com as primeiras no topo:
▶ Exemplo
▶ Experimente(1) Imagem de Fundo vs Tag <img>
- Imagem de fundo: Adequada para imagens decorativas, não afeta a semântica do conteúdo
- Tag
<img>: Adequada para imagens com significado de conteúdo (fotos de produtos, ilustrações de artigos), amigável para SEO e acessibilidade
3. Repetição de Fundo
Controla se imagens de fundo repetem/mosaico:
▶ Exemplo
▶ Experimente4. Tamanho de Fundo
Controla dimensões da imagem de fundo:
▶ Exemplo
▶ Experimentecover: Preenche contêiner mantendo proporção, excesso recortado (mais comum)contain: Mostra imagem completa mantendo proporção, pode ter espaço em branco
5. Posição de Fundo
Controla posição da imagem de fundo dentro do elemento:
▶ Exemplo
▶ Experimente6. Abreviação de Fundo
A abreviação background combina todas as propriedades de fundo:
▶ Exemplo
▶ Experimente❓ Perguntas Frequentes
P Qual é a diferença entre
background-size: cover e contain?R
cover preenche todo o contêiner mantendo proporção, recortando partes excedentes. contain mostra a imagem completa dentro do contêiner, pode deixar espaço em branco. Use cover para fundos de sangramento completo, contain quando precisa mostrar a imagem inteira.P Posso usar múltiplas imagens de fundo?
R Sim! Separe múltiplos fundos com vírgulas. As primeiras aparecem no topo. Exemplo:
background: url("overlay.png"), url("bg.jpg");. Frequentemente combinado com gradientes para efeitos de sobreposição.P Qual é a diferença entre
background-attachment: fixed e scroll?R
fixed mantém o fundo estacionário ao rolar (efeito parallax), scroll move com a página (padrão). Fixed cria percepção de profundidade mas pode afetar desempenho mobile.📖 Resumo
- Propriedades de fundo CSS são ricas — você pode definir cores sólidas, imagens de fundo, controlar repetição, tamanho, posição e comportamento de rolagem
background-size: cover+background-position: centeré a combinação mais comum para fundos responsivos- Use múltiplos fundos com vírgulas para efeitos de sobreposição
- Abreviação de fundo combina todas as propriedades em uma declaração
📝 Exercícios
- Crie um banner de largura total usando abreviação
backgroundcom imagem centralizada e sem repetição. - Crie um efeito parallax usando
background-attachment: fixedcom pelo menos duas seções. - Crie uma sobreposição de múltiplos fundos: máscara gradiente + imagem base no mesmo elemento.
