Fundo CSS
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
HTML
<style>
.box {
background-color: #f5f5f5;
}
.highlight {
background-color: rgba(255, 255, 0, 0.3);
}
</style>
<div class="box">Elemento caixa mostrando cor de fundo</div>
<div class="highlight">Este texto tem fundo destacado</div>
2. Imagem de Fundo
background-image define uma imagem de fundo para elementos:
Exemplo
HTML
<style>
.banner {
background-image: url("/assets/images/tutorials/css-banner.jpg");
height: 200px;
background-size: cover;
background-position: center;
}
</style>
<div class="banner">Área de exibição do conteúdo do banner</div>
Múltiplas imagens de fundo podem ser definidas, separadas por vírgulas, com as primeiras no topo:
Exemplo
HTML
<style>
.multi-bg {
background-image: url("/assets/images/tutorials/css-star.png"), url("/assets/images/tutorials/css-bg.jpg");
height: 200px;
background-size: 50px, cover;
background-repeat: no-repeat, repeat;
background-position: center, top left;
}
</style>
<div class="multi-bg">Efeito de sobreposição de múltiplos fundos</div>
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
HTML
<style>
.no-repeat {
background-image: url("/assets/images/tutorials/css-star.png");
background-repeat: no-repeat;
background-color: #f0f0f0;
height: 100px;
}
.repeat-x {
background-image: url("/assets/images/tutorials/css-star.png");
background-repeat: repeat-x;
background-color: #e3f2fd;
height: 100px;
}
</style>
<div class="no-repeat">Sem repetição (imagem única)</div>
<div class="repeat-x">Repetir horizontalmente</div>
4. Tamanho de Fundo
Controla dimensões da imagem de fundo:
Exemplo
HTML
<style>
.cover {
background-image: url("/assets/images/tutorials/css-banner.jpg");
background-size: cover;
background-position: center;
height: 200px;
}
.contain {
background-image: url("/assets/images/tutorials/css-banner.jpg");
background-size: contain;
background-repeat: no-repeat;
height: 200px;
}
</style>
<div class="cover">Cover: preenche contêiner, pode recortar</div>
<div class="contain">Contain: mostra imagem completa, pode deixar espaço em branco</div>
- cover: 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
HTML
<style>
.center {
background-image: url("/assets/images/tutorials/css-star.png");
background-repeat: no-repeat;
background-position: center;
background-color: #f5f5f5;
height: 100px;
}
.top-right {
background-image: url("/assets/images/tutorials/css-star.png");
background-repeat: no-repeat;
background-position: top right;
background-color: #e3f2fd;
height: 100px;
}
</style>
<div class="center">Fundo centralizado</div>
<div class="top-right">Fundo superior direito</div>
6. Abreviação de Fundo
A abreviação background combina todas as propriedades de fundo:
Exemplo
HTML
<style>
.shorthand {
background: #333 url("/assets/images/tutorials/css-banner.jpg") no-repeat center/cover;
height: 200px;
color: white;
}
</style>
<div class="shorthand">Abreviação de fundo com cor, imagem, repetição, posição e tamanho</div>
❓ Perguntas Frequentes
Q 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.
Q 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.
Q 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.