Propriedade de Tamanho do Fundo
Última atualização: 2026-09-13
background-size Propriedade de Tamanho do Fundo
A propriedade background-size controla as dimensões de uma imagem de fundo e foi introduzida no CSS3. Suporta auto (tamanho intrínseco da imagem), cover (cobrir o contêiner inteiro), contain (mostrar a imagem inteira dentro do contêiner), bem como valores explícitos de comprimento e porcentagem. A propriedade é muito útil em design responsivo.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | length |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
background-size: auto | cover | contain | <length> <percentage>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | Palavra-chave | Tamanho intrínseco da imagem |
cover | contain | Palavra-chave | Cobrir ou conter o contêiner |
<length> | <percentage> | Tipo | Valores de tamanho explícitos |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-size | ✓ v4 | ✓ v12 | ✓ v4 | ✓ v4.1 | ✓ v10 |
| Suportado em todos os principais navegadores | |||||
Dica： cover mantém a proporção e preenche o contêiner, podendo cortar parte do conteúdo; contain mostra a imagem inteira, podendo deixar espaço vazio.
Importante： Ao usar size no atalho background, ele deve vir depois da posição e ser separado por uma barra, por exemplo center/cover.
❓ Perguntas Frequentes
QDevo usar background-size: cover ou contain?
AUse cover quando a imagem deve cobrir o contêiner completamente e o corte é aceitável — a borda longa se ajusta ao contêiner e a borda curta é cortada. Use contain quando você precisa ver a imagem inteira e pode aceitar espaço vazio. cover é comum para banners e fundos de cartões; contain convém a fotos de produtos, logotipos e qualquer coisa que deva ser exibida por completo. Ambos preservam a proporção intrínseca, então a imagem nunca distorce.
Qbackground-size é animável?
ASim. background-size é uma propriedade interpolável, então anima suavemente em transições e @keyframes, por exemplo escalando de background-size: 100% a 110% no hover para um efeito de zoom sutil. Mudanças frequentes podem, no entanto, disparar repinturas; para animações de zoom sensíveis a desempenho, prefira transform: scale().
QComo faço um fundo preencher a área sem esticá-lo?
AUse background-size: cover;. Ela dimensiona a imagem pela sua proporção intrínseca até que o lado mais curto preencha o contêiner e o lado mais longo seja cortado, então nada distorce. Se a proporção da imagem diferir muito da do contêiner, adicione background-position: center para controlar qual parte é mantida. Para evitar o corte totalmente, use contain (aceitando espaço vazio) ou iguale a proporção do contêiner à da imagem.
QComo funcionam valores únicos e duplos em background-size?
ADois valores definem largura e altura, por exemplo background-size: 300px 200px; se a altura for auto, ela escala proporcionalmente. Um valor, por exemplo background-size: 300px, define a largura e a altura escala automaticamente para manter a proporção. cover, contain e auto são palavras-chave especiais e não podem ser misturadas com valores de comprimento.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
