Use CSS3 para esticar uma imagem de plano de fundo para ajustar uma página da Web

As imagens são uma parte importante dos designs de sites atraentes. Isso inclui o uso de imagens de fundo. Estas são as imagens e gráficos que são usados atrás áreas de uma página, em oposição às imagens apresentadas como parte das páginas de conteúdo. Essas imagens de plano de fundo podem adicionar interesse visual a uma página e ajudá-lo a obter o design visual que você pode estar procurando em uma página.

Se você começar a trabalhar com imagens de plano de fundo, certamente entrará no cenário em que deseja esticar uma imagem para se ajustar à página. Isso é especialmente verdadeiro para sites responsivos que estão sendo entregues a uma ampla variedade de dispositivos e tamanhos de tela.

Este desejo de esticar uma imagem de fundo é um desejo muito comum para os web designers, porque nem todas as imagens se encaixam no espaço de um site. Em vez de definir um tamanho fixo, o alongamento da imagem permite que ela se ajuste à página, independentemente da largura ou da largura da janela do navegador.

A melhor maneira de esticar uma imagem para caber no plano de fundo de uma página é usar a propriedade CSS3, para tamanho de plano de fundo. Aqui está um exemplo que usa uma imagem de fundo para o corpo de uma página e que define o tamanho para 100%, de modo que ele sempre se estique para caber na tela.

body { plano de fundo: url (bgimage.jpg) no-repeat; tamanho de fundo: 100%; }

De acordo com caniuse.com, essa propriedade funciona no IE 9+, no Firefox 4+, no Opera 10.5+, no Safari 5+, no Chrome 10.5+ e em todos os principais navegadores móveis. Isso cobre você para 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.

Fingindo um plano de fundo esticado em navegadores mais antigos

É muito improvável que você precise oferecer suporte a navegadores anteriores ao IE9, mas suponha que você esteja preocupado com o fato de o IE8 não oferecer suporte a essa propriedade. Nesse caso, você pode fingir um fundo esticado. E você pode usar os prefixos do navegador para o Firefox 3.6 (-moz-background-size) e Opera 10.0 (-o-fundo-tamanho).

A maneira mais fácil de falsificar uma imagem de fundo esticada é esticá-la pela página inteira. Então você não tem espaço extra ou precisa se preocupar com o fato de seu texto se encaixar na área esticada. Veja como fazer isso:

id = "bg" />

1. Primeiro, verifique se todos os navegadores têm 100% de altura, 0 margens e 0 preenchimento na eHTML CORPO elementos. Coloque o seguinte na cabeça do seu documento HTML:
2. Adicione a imagem que deseja que seja o plano de fundo como o primeiro elemento da página da Web e forneça identidade de "bg":
3. Posicione a imagem de fundo de modo que ela seja fixada na parte superior e esquerda e seja 100% de largura e 100% de altura. Adicione isto à sua folha de estilo:
   1. img # bg {
   3. posição: fixa;
   5. top: 0;
   7. esquerda: 0;
   9. largura: 100%;
   11. altura: 100%;
   13. }
4. Adicione todo o seu conteúdo à página dentro de um DIV elemento com um identidade de "conteúdo". Adicione o DIV abaixo da imagem:Todo o seu conteúdo aqui - incluindo cabeçalhos, parágrafos, etc.
   1. Nota: é interessante ver a sua página agora. A imagem deve aparecer esticada, mas seu conteúdo está completamente ausente. Por quê? Porque a imagem de fundo tem 100% de altura e a divisão de conteúdo é depois de a imagem no fluxo do documento - a maioria dos navegadores não a exibe.
5. Posicione seu conteúdo de modo que seja relativo e tenha um z-index 1. Isso trará acima da imagem de fundo em navegadores compatíveis com padrões. Adicione isto à sua folha de estilo:
   1. #content {
   3. posição: relativa;
   5. índice z: 1;
   7. }
6. Mas você não terminou. O Internet Explorer 6 não está em conformidade com os padrões e ainda apresenta alguns problemas. Há muitas maneiras de ocultar o CSS de cada navegador, mas o IE6, mas o mais fácil (e menos provável de causar outros problemas) é usar comentários condicionais. Coloque o seguinte após sua folha de estilo no cabeçalho do seu documento:
7. Dentro do comentário destacado, adicione outra folha de estilo com alguns estilos para obter o IE 6 para reproduzir:
8. Certifique-se de testar no IE 7 e no IE 8 também. Você pode precisar ajustar os comentários para apoiá-los também. No entanto, funcionou quando eu testei.

OK - isto é reconhecidamente excessivo. Poucos sites precisam suportar mais o IE 7 ou 8, muito menos o IE6! Como tal, esta abordagem é antiquada e provavelmente desnecessária para você. Eu deixo aqui mais como um modelo de curiosidade sobre o quanto as coisas eram mais difíceis antes de todos os nossos navegadores jogarem tão bem juntos!

Fingindo uma imagem de fundo esticada sobre um espaço menor

Você pode usar uma técnica semelhante para falsificar uma imagem de fundo esticada em um DIV ou outro elemento na sua página web. Isso é um pouco mais complicado, pois você deve usar posicionamento absoluto ou ter problemas de espaçamento estranhos em outras partes da sua página.

1. Coloque a imagem na página que quero usar como plano de fundo.
2. Na folha de estilo, defina uma largura e altura para a imagem. Observe, você pode usar porcentagens de largura ou altura, mas acho mais fácil ajustar com valores de comprimento para a altura.
   1. img # bg {
   3. largura: 20em;
   5. altura: 30em;
   7. }
3. Coloque seu conteúdo em um div com o identidade "conteúdo" como fizemos acima:Todo o seu conteúdo aqui
4. Estilize o conteúdo div com a mesma largura e altura da imagem de plano de fundo:
   1. div # content {
   3. largura: 20em;
   5. altura: 30em;
   7. }
5. Em seguida, posicione o conteúdo até a mesma altura da imagem.Então, se sua imagem é 30em, você teria um estilo de topo: -30em; Não se esqueça de colocar um z-index de 1 no conteúdo.
   1. #content {
   3. posição: relativa;
   5. topo: -30em;
   7. índice z: 1;
   9. largura: 20em;
   11. altura: 30em;
   13. }
6. Em seguida, adicione um z-index de -1 para usuários do IE 6, como você fez acima:

Mais uma vez, com o tamanho de fundo aproveitando o amplo suporte a navegadores que ele agora oferece, essa abordagem também é muito provavelmente desnecessária e apresentada como um produto de uma época passada. Se você quiser usar essa abordagem, apenas teste isso em quantos navegadores puder. E se o seu conteúdo mudar de tamanho, você precisará alterar o tamanho do seu contêiner e da imagem de plano de fundo, caso contrário, você terá resultados estranhos.