O que saber
- Método preferido: use a propriedade CSS3 para tamanho do fundo e configurá-lo para cobrir.
- Método alternativo: use a propriedade CSS3 para tamanho do fundo definido como 100% e posição de fundo definido como Centro.
Este artigo explica duas maneiras de esticar uma imagem de plano de fundo para caber em uma página da web usando CSS3.
A maneira moderna
As imagens são uma parte importante do atrativo designs de site. Eles adicionam interesse visual a uma página e ajudam você a alcançar o design que você está procurando. Ao trabalhar com imagens de fundo, você pode querer que uma imagem se estique para caber na página, apesar do ampla variedade de dispositivos e tamanhos de tela.
A melhor maneira de esticar uma imagem para caber no plano de fundo de um elemento é usar o CSS3 propriedade, para tamanho do fundo, e defini-lo igual a cobrir.
div {
imagem de fundo: url ('background.jpg');
tamanho do fundo: capa;
repetição de fundo: sem repetição;
}
Dê uma olhada neste exemplo em ação. Aqui está o HTML na imagem abaixo.
Agora, dê uma olhada no CSS. Não é muito diferente do código acima. Existem alguns acréscimos para torná-lo mais claro.
Agora, este é o resultado em tela cheia.
Pela configuração tamanho do fundo para cobrir, você garante que os navegadores escalarão automaticamente a imagem de plano de fundo, por maior que seja, para cobrir toda a área do elemento HTML ao qual ela está sendo aplicada. Dê uma olhada em uma janela mais estreita.
De acordo com caniuse.com, esse método é compatível com mais de 90% dos navegadores, o que o torna uma escolha óbvia na maioria das situações. Isso cria alguns problemas com os navegadores da Microsoft, portanto, um substituto pode ser necessário.
The Fallback Way
Aqui está um exemplo que usa uma imagem de fundo para o corpo de uma página e que define o tamanho para 100% para que sempre estique para caber na tela. Este método não é perfeito e pode causar algum espaço descoberto, mas usando o posição de fundo, você deve ser capaz de eliminar o problema e ainda acomodar navegadores mais antigos.
corpo {
fundo: url ('bgimage.jpg');
repetição de fundo: sem repetição;
tamanho do fundo: 100%;
posição de fundo: centro;
}
Usando o exemplo acima com o tamanho do fundo definido como 100% em vez disso, você pode ver que o CSS parece basicamente o mesmo.
O resultado em um navegador de tela inteira ou com dimensões semelhantes às da imagem é quase idêntico. Porém, com uma tela mais estreita, as falhas começam a aparecer.
Claramente, não é o ideal, mas funcionará como uma alternativa.
De acordo com caniuse.com, esta propriedade funciona no IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ e em todos os principais navegadores móveis. Isso cobre todos os navegadores modernos disponíveis hoje, o que significa que você deve usar essa propriedade sem medo de que ela não funcione na tela de alguém.
Entre esses dois métodos, você não deve ter nenhuma dificuldade em oferecer suporte a quase todos os navegadores. Como tamanho do fundo: capa ganha ainda mais aceitação entre os navegadores, mesmo esse fallback se tornará desnecessário. Claramente, CSS3 e práticas de design mais responsivas foram simplificadas e otimizadas usando imagens como planos de fundo adaptáveis dentro de elementos HTML.