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!

score 2 · Answer 1 · answered Feb 28 '14 at 09:28

Done it. Used Javascript.

<script>
jQuery(document).ready(
    function()
    {   

        var background=jQuery('#background');  //hier holt man sich das div
        var image_aspect_ratio=1500/2500; // seitenverhältnis des Bildes

        function resize_image() {  // diese funktion verändert das div

            var viewportHeight= jQuery(window).height();  // Höhe viewport
            var div_width=Math.ceil(viewportHeight*image_aspect_ratio);  // div Höhe = viewport Höhe; div Breite = viewport Höhe * seitenverhältnis 
            background.css("width",div_width); // Breite setzen

        };
        resize_image();  // beim ersten mal wird die Funktion ohne event handler aufgerufen
        jQuery(window).resize(resize_image);  // bei jedem resize wird dieser event handler aufgerufen, der wiederum die funktion aufruft


    });
</script>

Works fine this way. Thanks for your help anyways!

score 0 · Accepted Answer · edited May 23 '17 at 12:28

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.

Hello, Thank you for your answer! Great to see someone actually replied. From what I see in Dreamweaver when making it the way you done it, it seems to work, just when I view in in a Browser I have two problems still existing. 1. The image once again fills the whole width and you have to scroll. 2. The image does not resize when resizing the window. — Matthias Gies, Feb 27 '14 at 08:16
I've now done it the way I want it to work. The green boxes are now using the red div as their parent. Means they resize and stay in the position where they are after resizing the window. Now the only problem is to get a image in there that does only take up the height of that div. So it basically stays all the same, only with a picture in the background instead of a red box. — Matthias Gies, Feb 27 '14 at 08:21
So basically what I need is the image inside the red box, resizing with the box. As if the image was the box. Means it can be stretched in all kind of ways. But I'm not getting it to tell the image to always be 100% height of the div box and 100% width of the div box. — Matthias Gies, Feb 27 '14 at 08:33

Scale and position div relative to image with 100% height

2 Answers2