23.11.2024

CSS: Esticando uma Imagem de Fundo na Largura

Resposta Rápida

Para esticar uma imagem de fundo em CSS, existem dois métodos disponíveis:

1. background-size: cover; permite que você mantenha a proporção da imagem.
2. background-size: 100% 100%; garante que a imagem se ajuste exatamente às dimensões do elemento.

Vamos analisar isso com exemplos práticos:

.elemento {
  background-image: url('imagem.jpg'); /* Especifique o caminho para sua imagem */
  background-size: cover; /* A imagem se estica enquanto mantém as proporções */
  /* OU */
  background-size: 100% 100%; /* A imagem se estica com um ajuste exato ao elemento */
  background-repeat: no-repeat; /* Impede a repetição, para que a imagem não se duplique */
  background-position: center; /* Centraliza a imagem */
}

Para garantir que cover funcione corretamente, a largura e a altura do elemento devem ser definidas para 100%. Também é importante organizar bem o armazenamento das imagens para evitar problemas futuros.

Visualização

Aqui está um exemplo visual de como isso pode ficar:

.container {
  background-image: url('balão.jpg'); /* Usando uma imagem de um balão */
  background-size: cover; /* E ela preenche perfeitamente o contêiner */
}

🧱 Papel de Parede com Balão (🎈)                 🧱 Papel de Parede Esticado com Ajustes (🎈🔧)

O Que Estamos Aprendendo Aqui: Usando background-size: cover;, a imagem do balão (🎈) cobre completamente o elemento (🧱), não deixando áreas não preenchidas.

Controlando o Processo de Esticamento

Garantindo Compatibilidade com Navegadores

Nosso objetivo é manter a apresentação uniforme em diferentes navegadores:

.elemento {
  background: url('imagem.jpg') no-repeat center; /* Todos amam um fundo centralizado */
  -webkit-background-size: cover; /* Para usuários do Chrome e Safari */
  -moz-background-size: cover;    /* Para usuários do Firefox */
  -o-background-size: cover;      /* Para usuários do Opera */
  background-size: cover;         /* Padrão para outros navegadores */
}

É sempre bom verificar a compatibilidade na fonte essencial Can I use.

Consideração Especial para Internet Explorer

Para usuários que ainda utilizam Internet Explorer:

.elemento {
  background-image: url('imagem.jpg');
  background-size: cover; /* Opção principal para navegadores modernos */

  /* Opção alternativa para Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imagem.jpg', sizingMethod='scale'); /* Aplicar um filtro especial para IE */
  zoom: 1; /* IE requer uma abordagem adicional */
}

Trabalhando com Design Responsivo e Conteúdo Sobreposto à Imagem

Devemos nos concentrar particularmente em design responsivo e conteúdo sobreposto. Veja como fazemos isso:

• Use uma altura mínima: Permitindo que a imagem defina o tamanho, em vez do conteúdo.
• Utilize pseudo-elementos CSS: Para manter o código HTML limpo.
• Controle o overflow de conteúdo: A propriedade overflow: hidden ajuda a evitar que o conteúdo transborde os limites do elemento.

Técnica Testada e Aprovada com a Tag <img>

Existem situações em que a boa e velha tag <img> é irreplaceável:

<div class="bg-container">
  <img src="imagem.jpg" class="bg-image" alt="Imagem de fundo"> <!-- Nossa amada tag img em ação -->
  <div class="conteudo"> <!-- Aqui você pode colocar algo importante... --> </div>
</div>

.bg-container {
  position: relative;
}
.bg-image {
  position: absolute; /* A imagem está posicionada absolutamente */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;  
}

Não esqueça da importância do atributo alt para acessibilidade e SEO.

Recursos Úteis

1. Papel de Parede Perfeito em Tela Cheia | CSS-Tricks — Um excelente guia sobre como criar imagens de fundo em tela cheia.
2. background - CSS | MDN — Um guia detalhado sobre a propriedade background.
3. Propriedade background-size do CSS — Uma visão geral da propriedade background-size.
4. Imagens Responsivas Simples com Imagens de Fundo CSS - Smashing Magazine — Técnicas para criar imagens de fundo responsivas.
5. Por Favor, Aumente Essa Imagem de Fundo! - A List Apart — Uma discussão sobre várias maneiras de aumentar imagens de fundo em páginas da web.

Video

Navigation