[SOLUCIONADO] ¿Como hacer que un fondo se escale segun la proporción de cada pantalla?

[emofilicox]

Hola estoy haciendo una web donde tengo una imagen fixed al 100% de ancho de la página y su altura automática. (abajo pongo el link para que la vean)

Lo hago desde mi Netbook que tiene una resolución de pantalla 1366x768 (15 pulgadas) y aquí se ve perfectamente bien.

El problema viene cuando la visualizo en otros monitores con distintas resoluciones, el fondo se mueve y los elementos que tengo encima del fondo que están planeados se vean exactamente ahí (encima del fondo, que es una hoja de papel) ya no cuadran y pierde aspecto.

La ayuda que pido es que quiero que el fondo se vea exactamente en las mismas proporciones así como lo veo yo en la resolución de mi notebook, así como en pantallas que tengas más o menos resolución.

Adjunto la imagen de como debe verse y debería verse en cualquier resolución



Dejo link que muestra mi pagina en diversas resoluciones para que vean como se mueve segun la resolución y se desajusta:

[URL="http://quirktools.com/screenfly/#u=http%3A//www.merkazhop.com/mkz3&w=1366&h=768&a=1"]http://quirktools.com/screenfly/#u=http%3A//www.merkazhop.com/mkz3&w=1366&h=768&a=1[/URL]

Y dejo CSS qu estoy usando

Código:

#fondo {
	height:auto;
	position:absolute;
	left:0px;
	top:0;
	width:100%;
	z-index:1;
}

Y como lo aplico dentro del body

Código HTML:

<div><img id="fondo" src="blue.jpg"></div> 

Muchas gracias por su ayuda.

[snurceles]

Buenas emofilicox, ¿Probaste a meter en el body esto?

(Creo recordar que id ya no se usa)

<img src="./blue.jpg" alt="fondo" width="100%">

[emofilicox]

Bueno ya lo resolví, agregue al id fondo las propiedades min-height y max-height esto ayuda a que se mantenga fija.

Lo "malo" es que la imagen se ve estirada hacia los lados en pantallas mayores a las 20 pulgadas... si con eso me pudieran ayudar ahora... gracias.

Asi s como quedo l ID fondo

Código:

#fondo {
	height:auto;
	position:absolute;
	left:0px;
	top:0;
	width:100%;
	z-index:1;
	min-height:650px;
	max-height:650px;
}

[snurceles]

Ahh buenisma idea, mandame por mp la pagina cuando este acabada =D

[emofilicox]

Iniciado por snurceles

Ahh buenisma idea, mandame por mp la pagina cuando este acabada =D

Hecho !!! Gracias Saludos !!!

[GeekGirl]

Acuérdense de marcar como solucionado así no perdemos tiempo entrando a ver cómo ayudar :)

Saludos