Lo que pedís es un poco complicado pero acá va:
1.Tenés que elegir el tamaño máximo de resolución que vas a abarcar con tu web, En este caso, la imagen la hice de 1000px porque elegí como tamaño máximo 1024x768. En resoluciones mayores se va a ver un poco pixelado, aunque funciona.
2. El fondo es un jpg y la chica es un png transparente.
3.El div con id="wrapperFondo" envuelve tanto a la imagen de fondo como a la figura de la chica. Debe ser de ancho 100% (el ancho del navegador) y position:relative.
4.La imagen del fondo, en este caso <img class="fondo" src="fondo.jpg" />, debe tener ancho 100%. Esto quiere decir que siempre va a estar al 100% de su contenedor y su contenedor en este caso es wrapperFondo, que a su vez tiene como ancho el 100% de la ventana. En definitiva, esto quiere decir que la imagen siempre va a estar al 100%.
5.La imagen de la figura de la chica, en este caso <img class="figura" src="figura.png" />, siempre va a tener un tamaño y una posición al tamaño de la imagen de fondo, y la imagen de fondo varía de tamaño según la resolución. Entonces, hay que sacar las proporciones de la chica:
- El ancho de la imagen de la chica es aquí de 211px. Si la imagen de fondo es de 1000px, entonces 211px es el 21% de 1000px. En definitiva, en este caso, el ancho de la chica es de 21%.
- Desde la izquierda, la posición de la chica en la imagen de 1000px es de 668px.
Y 668px es el 67% de 1000. Entonces la posición desde la iquierda es left:67%.
-Siguiendo la misma lógica llegás a que 12% es la distancia desde arriba (top)
-IMPORTANTE: la posición de la figura debe ser position:absolute. En este caso, pusimos además position: relative al contenedor (wrapperFondo). De esta manera, el origen de la posición de la figura de la chica no es el arriba/izquierda del navegador, si no el arriba/izquierda del wrapperFondo.
Aquí te dejo los archivos de ejemplo:
http://www.megaupload.com/?d=1CFV79G6
