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.