Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá. Gostaria de saber como fazer para ter uma imagem de fundo no qual ela se ajuste automaticamente a resolução horizontal do navegador. O código a seguir provavelmente não existe, mais já vai dar a idéia exata o que quero:
body {
margin: 0px;
background-image:imagem.jpg;
background-width:100%;
}Com CSS3 dá pra fazer isso com background-size. :]
Dá pra fazer isso com um pouco de gambiarra. Se quiser...
Só não se esqueça que dependendo da resolução do cliente, a imagem pode vir a ficar distorcida.
:thumbsup:
O melhor nessa situação é criar uma pequena aplicação no qual faz a leitura da resolução de ecrã do usuário que está a visualizar o site e criar várias imagens com tamanhos diversos, relacionados com a as diversas resoluções de ecrã, depois a aplicação faz a leitura da resolução e carrega a respectiva imagem /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/wink.gif&key=0566fd943552bcff9cb1b879403ca34b5ff8f67befaac7fe4648006e9f764689" alt="Imagem Postada" />. Acho que deu para entender /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/tongue.gif&key=8d11c3c7c03c7a5a294e250694d100848a0423dc34ef2af8d774f49d1b969fde" alt="Imagem Postada" />.
Cumps
<img id="background_gambiarra" src="img/bg.jpg" alt="">
#background_gambiarra { height: 100%; position: absolute; width: 100%; z-index: -7; }
Você quer esticar uma imagem com o css?
Ou quer fazer ela repetir no x ou y?