Redimensionamento e Estiramento de Imagens de Fundo em CSS
Resposta Rápida
Para garantir que a imagem de fundo preencha perfeitamente um elemento, defina a propriedade background-size como cover, centralize a imagem dentro do elemento e defina a propriedade background-repeat como no-repeat.
.element {
background: url('image.jpg') center/cover no-repeat;
}Esse código CSS garante que a imagem preencha totalmente e sem distorções o elemento com a classe .element.
Aplicando Tamanhos Mínimos: Mantendo Proporções da Imagem
Defina min-width e min-height como 100% para garantir a cobertura total do fundo do elemento. Observe que, devido a diferenças nas proporções, algumas partes da imagem podem ser cortadas.
Compatibilidade entre Navegadores: Suporte a Versões Antigas
O comando background-size: cover; é suportado pela maioria dos navegadores, mas não esqueça das versões mais antigas. Para garantir a compatibilidade, use prefixes de fornecedores.
.element {
-webkit-background-size: cover; /* Para Chrome e Safari */
-moz-background-size: cover; /* Para Firefox */
-o-background-size: cover; /* Para Opera 12 */
background-size: cover; /* Padrão para outros navegadores, incluindo IE9+ */
}Para suporte a versões mais antigas do IE, use o seguinte código:
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='suaImagem.jpg', sizingMethod='scale')";Ferramentas Modernas: Suporte Adicional
Se apenas o CSS não for suficiente, Modernizr e jQuery podem ajudar. O Modernizr verifica o suporte da propriedade background-size, enquanto o plugin imgsizer para jQuery permite gerenciar imagens de fundo em diferentes dispositivos.
Mantendo Proporções: Proporções de Aspecto
Se você precisa manter as proporções da imagem de fundo enquanto redimensiona, use o valor "auto" para largura ou altura. Mas tenha cuidado com min-width e min-height definidos como 100% para evitar cortes indesejados na imagem.
Visualização
background-size: cover; /* Uma pequena imagem de fundo pode cobrir lindamente todo o elemento */background-size: contain; /* Uma imagem muito grande se encaixará completamente dentro do elemento */ 🏞️ Inverno (cobrir) 🏞️ Verão (contido)
Antes: ⛄️🌲[-------]🌲⛄️ Antes: 🌞🌳[-------]🌳🌞
Depois: 🌲[🏞️🌲🌲🌲🏞️]🌲 Depois: [🏞️🌳🌳🌳🏞️]Largura Total vs. Cobertura Completa: Avaliando a Tarefa
Para exibir um fundo ao longo de toda a largura do contêiner enquanto mantém proporções, use background-size: 100% auto;. Se a cobertura completa for necessária, defina background-size: 100% 100%;.
Media Queries: Gerenciando Responsividade
Para adaptar background-size para diferentes tamanhos de tela, use media queries para alcançar imagens de fundo responsivas.
Design Responsivo: Trabalhando com Tamanhos Percentuais
Designs que utilizam predominantemente valores percentuais requerem ajustes cuidadosos em scripts para controle preciso do redimensionamento da imagem sem distorções.
Recursos Úteis
- background-size - CSS: Folhas de Estilo em Cascata | MDN — Descrições detalhadas sobre como usar a propriedade CSS background-size.
- Múltiplos Fundos em CSS — Visão geral sobre o uso de múltiplos fundos em CSS3.
- Imagem de Fundo Perfeita em Tela Cheia | CSS-Tricks — Um guia passo a passo para criar uma imagem de fundo em tela cheia.
- Caixas de Proporção | CSS-Tricks — Guia sobre como manter proporções para imagens.
- Um Guia Completo para Flexbox | CSS-Tricks — Um guia abrangente para flexbox, simplificando a criação de layouts responsivos.