Quero que a minha imagem de fundo estique e escale, dependendo do tamanho da porta de visualização do navegador.
I'vi algumas perguntas em Stack Overflow que fazem o trabalho, como Stretch and scale CSS background por exemplo. Funciona bem, mas eu quero colocar a imagem utilizando background
, não com uma tag img
.
Nesse é colocada uma tag 'img', e depois com o CSS homenageamos a tag 'img'.
width:100%; height:100%;
Funciona, mas essa pergunta é um pouco antiga, e afirma que no CSS 3 redimensionar uma imagem de fundo vai funcionar muito bem. I'tentei isto exemplo o primeiro, mas não funcionou'não funcionou para mim.
Existe um bom método para o fazer com a declaração "imagem de fundo"?
Usando o código Eu mencionei...
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}
.stretch {
width:100%;
height:100%;
}
Isso produz o efeito desejado: apenas o conteúdo irá rolar, não o fundo.
A imagem de fundo é redimensionada para a porta de visualização do navegador para qualquer tamanho de tela. Quando o conteúdo não'não cabe na viewport do navegador, e o usuário precisa rolar a página, a imagem de fundo permanece fixa na viewport enquanto o conteúdo rola.
Com o CSS 3, parece que isto seria muito mais fácil.
Você pode realmente conseguir o mesmo efeito que uma imagem de fundo com a tag img. Só tem de definir o seu índice z mais baixo do que tudo o resto, definir posição:absoluto e usar um fundo transparente para cada caixa em primeiro plano.
Você quer alcançar isso usando apenas uma imagem? Porque você pode realmente fazer algo semelhante a um fundo de alongamento usando duas imagens. PNG imagens, por exemplo.
I'já fiz isto antes, e não é assim tão difícil. Além disso, acho que o alongamento só prejudicaria a qualidade do fundo. E se você adicionar uma imagem enorme, isso iria diminuir a velocidade dos computadores e navegadores.