Scale and position div relative to image with 100% height

Question

no idea how else to call my headline. I have a page for non-mobile devices. In this page I want to have a high image always fitting the window height. Page

Done it like this:

#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;
}

Looks like in the "Page" link.

Now when I skale the window in order to try how it looks on other screens, this is what happens to my green div box:http://s14.directupload.net/images/140226/q8dbpdgj.jpg Or when ur on the page, just scale it yourself to see what happens.

This is the div box code:

#hotspot-nickelsee{
    position:absolute;
    background-color:#0F0;
    top:25%;
    width:10%;
    height:10%;
    left:33%;
}

This is the HTML-Code:

<div id="background">

     <div id="hotspot-nickelsee">
     </div>

</div>

Now what is wrong here? What do I have to do, in order to make the div box ALWAYS stay at the same position on the image - no matter how the window is sized? Any workaround?

When I'm trying to load the imagine into the "background" div instead of using it as a background picture, the div scales to 100% size of the image and fills the window (picture is very large) and that's not what I want.

Thanks for any kind of help!

Answer 1

The problem was your div, #background, right around the hotspots spanned the whole width and height of the body. This was a problem since resizing the window reworks the position relative to #background which is your closes position relative, absolute, or fixed div. (More on positioning here http://alistapart.com/article/css-positioning-101)

Since your top left and bottom are all relative to something that's the full size of the screen it moves when you resize the window. What you need is for #background to only cover the size of the img. Which means you need the image to be an img tag that takes up width that the #background can see and fit around. We can accomplish the background to fit around the img tag through a trick called shrink wrapping which you honestly don't need all that often, but this is a good use case.

I added some html to what was existing just to get everything looking like it was. I kind of used a bit of a css hack to center the image making the #background-container display: inline-block so I could use text-align: center on it. I regularly use margin: 0 auto for centering but I think you can't use it when you display: inline-block

The following changes were made to the HTML

<div id="background-color">
  <div id="background-container">
    <div id="background">
      <img class="background-image" src="Ortsplan_2014_small.jpg">
         <div id="hotspot-nickelsee" class="hotspottet">
         </div>

         <div id="hotspot-marienkapelle" class="hotspottet">
         </div>

         <div id="Hotspot-Kirche" class="hotspottet">
         </div><div id="Hotspot-Kirche2" class="hotspottet">
         </div>

         <div id="Hotspot-Stadtmauer" class="hotspottet">
         </div>

         <div id="Hotspot-Rathaus" class="hotspottet">
         </div>

      </div>
  </div>
</div>

And these are the changes to the CSS the comments are things I took out I removed so make sure you remove those as well.

.background-image {
    max-height: 100%;
}

#background-color {
    position: absolute;
    background-color: red;
    width:100%;
    text-align: center;
}

#background-container {
    display: inline-block;
}

#background {
    position: relative; /*changed from 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; */
    display: inline-block;
}

Hope that helped. Worked for me when I tried it in the browser. Feel free to comment below if you get stuck or need help implementing it.