Hola, tengo este código html
<img id="bg" src="fondo.jpg" alt="Fondo">
<div id="div1">
<img class="sobreimagen1" src="sobreimagen1.gif" alt="imagen sobrepuesta">
</div>
y tengo este css.
#bg {
position:fixed;
z-index:-1;
top:0;
left:0;
width:100%;
}
#div1 {
position:relative;
top:10%;
left:35%;
width:100%;
}
.sobreimagen1 {
position:fixed;
width:8%;
};
De esa manera, "sobreimagen1.gif" (que está sacada de una porción de fondo.jpg se posiciona justo en el mismo sitio de donde "sobreimagen1.gif" ha salido, de forma que parece como si solo fuese 1 foto.
También de esa manera consigo que al hacerse más grande y más pequeño el ancho de la ventana del explorador, la imagen "fondo.jpg" se adapte al tamaño de la ventana. Y también consigo que "sobreimagen1.gif" se haga más grande y más pequeño al mismo tiempo que el fondo.
Por último, también consigo que horizontalmente "sobreimagen1.gif" se posicione en el lugar correspondiente con respecto a "fondo1.jpg" según este se va haciendo más grande y más pequeño al hacer más ancha y más estrecha la ventana del explorador.
Sin embargo, lo que me falta (y he aqui el motivo de este post) es el posicionamiento vertical. Ya que "fondo.jpg" solo se hace más grande y más pequeño dependiendo del ancho, no del alto del explorador. Así pues el valor dado a top no me sirve.
La solución idónea pasa porque el valor de top dependa del valor de left, de esa manera al disminuir el tamaño de la imagen "fondo.jpg", disminuir "sobreimagen1.gif" y este último adaptarse al margen izqdo según la necesidad... también el top se mueva más o menos según más o menos se mueve en left.
Hay alguna manera de conseguir que top dependa de left (con css, o de alguna otra manera?) o que con otro sistema conseguir el efecto buscado?
--------
Resumiento: Si pongo top:10% entonces top es un 10% de la altura de la ventana del explorador. Y lo que me gustaría sería que top fuese un % de la anchura, no de la altura del explorador.
