Looking for a better headline...
On my non-mobile device page, I want to ensure that a large image always fits the window height. Take a look at the page.
This is how I've set it up:
#background{
position:absolute;
background-color:#F00;
width:100%;
height:100%;
top:0%;
background-image:url(Ortsplan_2014_small.jpg);
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
It appears as shown in the link to the "Page".
However, when I resize the window to test on different screens, the green div box behaves strangely. Check out this image to see what happens or try scaling the window yourself.
Here is the code for the div box:
#hotspot-nickelsee{
position:absolute;
background-color:#0F0;
top:25%;
width:10%;
height:10%;
left:33%;
}
And here is the HTML-Code:
<div id="background">
<div id="hotspot-nickelsee">
</div>
</div>
What am I doing wrong here? How can I make sure the div box stays in the same position on the image regardless of window size? Any tips?
When I try loading the image directly into the "background" div instead of using it as a background picture, the div scales to 100% of the image size and fills the window, which is not the desired outcome.
Thank you for any assistance!