22.04.2025

Esticando Imagens de Fundo em um Div com CSS Sem Repetição

Resposta Rápida

Para ajustar o tamanho de uma imagem de fundo em um div usando CSS, utilize a propriedade background-size. A opção cover preenche todo o div com a imagem, enquanto contain posiciona a imagem para caber completamente dentro do div, sem corte. Para evitar que a imagem se repita, defina background-repeat como no-repeat e centralize a imagem com background-position: center.

.div-bg {
  background: url('imagem.jpg') no-repeat center center / cover;
}

Aplique este CSS ao seu div:

<div class="div-bg"></div>

Dessa forma, você garante a exibição adequada da imagem de fundo.

Método para Esticar Imagem Através de Todo o Div

Se você precisa esticar a imagem para que ela ocupe todo o div, você pode usar o valor percentual 100% 100%. No entanto, esse método pode distorcer a imagem, razão pela qual não é comumente utilizado:

.stretched-bg {
  background-size: 100% 100%; /* Potencial distorção da imagem */
}

Usando Object-Fit para Imagens

Utilize a propriedade object-fit para elementos <img> para controlar as dimensões e o preenchimento do contêiner:

.img-fit {
  object-fit: cover; /* Ou contain, semelhante à propriedade background-size */
}

Note que object-fit não é suportado pelo Internet Explorer.

Media Queries para Design Responsivo

Aplicar media queries permite adaptar as imagens ao tamanho da tela e garantir que sejam exibidas de forma conveniente em diversos dispositivos:

@media (max-width: 768px) {
  .div-bg {
    background-size: contain; /* Evita escalonamento excessivo das imagens em dispositivos móveis */
  }
}

Efeitos Visuais

A percepção da imagem muda significativamente dependendo do valor de background-size:

• Contain: A imagem toda se encaixa dentro, mas podem ficar áreas descobertas.
• Cover: O div é totalmente preenchido, mas a imagem pode ser cortada.
• 100% 100%: Cobertura total, mas pode ocorrer distorção.

Visualização

Imagine uma moldura 🖼️ com diferentes fotos de paisagens 🏞️:

.frame {
  /* Seu div é sua moldura. Defina suas condições */
  width: 100px;  /* Largura da moldura - tão profunda quanto sua paciência */
  height: 100px; /* Altura da moldura - tão alta quanto suas ambições */
  background: url('paisagem.jpg'); /* Escolha uma paisagem */
  background-size: cover;  /* A imagem preenche suavemente a moldura */
  background-position: center; /* Foque no centro */
}

Com a opção background-size: cover;, a imagem se estica para preencher completamente a moldura:

Antes: 🖼️🏞️ (A imagem está procurando seu lugar)
Depois: 🖼️[🏞️] (A imagem se encaixa perfeitamente na moldura)

Seu Viewport é a parede onde sua moldura está pendurada, sempre correspondendo ao interior!

Suporte Entre Navegadores com jQuery

Para garantir compatibilidade entre diferentes navegadores, você pode usar a biblioteca jQuery:

$(window).resize(function() {
  $('.div-bg').css('background-size', window.innerWidth > window.innerHeight ? 'cover' : 'contain'); /* Consideramos as especificidades de cada dispositivo */
});

Sempre que possível, prefira usar CSS puro, mas o JavaScript pode ser uma boa solução alternativa.

Exemplos Práticos em Tempo Real

Codepen é uma fantástica plataforma para experimentar com background-size:

Veja a demonstração no Codepen

Executar testes ajuda a visualizar as diferenças e entender melhor os princípios em ação.

Preparando-se para Vários Cenários

Você pode encontrar alguns desafios:

• Design Responsivo: Utilize picture ou source com atributos de mídia para selecionar diferentes imagens em diferentes pontos de interrupção.
• Conjuntos de Imagens: srcset e sizes ajudarão a especificar diferentes opções de imagem com base no dispositivo.
• Imagens Vetoriais: Para logotipos e ícones, é preferível usar SVG devido à sua escalabilidade e pequeno tamanho.

Recursos Úteis

1. Propriedade background-size no CSS — Descrição detalhada das propriedades para tamanhos de imagens de fundo.
2. Unidades de Medida em CSS | CSS-Tricks — Todos os detalhes sobre unidades CSS para escalonamento.
3. Imagem de Fundo Perfeita em Tela Cheia | CSS-Tricks — Como criar a imagem de fundo perfeita em tela cheia.
4. Mantendo Proporções de Bloqueio | CSS-Tricks — Um guia para manter proporções em blocos responsivos.
5. background-image - CSS: Folhas de Estilo em Cascata | MDN — Descrição detalhada do uso da propriedade background-image.
6. Design Responsivo — Aprenda Desenvolvimento Web | MDN — Exame minucioso dos princípios de design responsivo.
7. Propriedade background-repeat no CSS — Tudo sobre configurações para imagens de fundo repetidas.
8. Guia Completo para Flexbox | CSS-Tricks — A chave para dominar o Flexbox para trabalhar com imagens e muito mais.

Video

Navigation