Preserve position of elements in respect of background image while resize

Question

Hey I have container with background-image and I added the "pins" to the container and set the position. But the problem is with resize of the window. While the resizing the position of the pins doesnt preserve (especially vertically). How can I set the position to stay always on the same place in respect of background image ?

DEMO: JSFiddle

CSS:

.building {
  height: 100%;
  width: 100%;
  position: relative;
  background: transparent url('http://svgshare.com/i/403.svg') no-repeat left center/contain;

  &__item {
    position: absolute;
    z-index: 50;
    &--1 {
      bottom: 11%;
      left: 24%;
    }
    &--2 {
      bottom: 18%;
      left: 10%;
    }
    &--3 {
      bottom: 10%;
      left: 38%;
    }
    &--4 {
      bottom: 20%;
      left: 43%;
    }
    &--5 {
      bottom: 48%;
      left: 84%;
    }
    &--6 {
      bottom: 38%;
      left: 30%;
    }
    &--7 {
      bottom: 70%;
      left: 84%;
    }
    &--8 {
      bottom: 23%;
      left: 86%;
    }
    &--9 {
      bottom: 60%;
      left: 68%;
    }
    &--10 {
      bottom: 8%;
      left: 30%;
    }
    &--11 {
      bottom: 35%;
      left: 84%;
    }
  }

Answer 1

You won't be able to accomplish this with pure CSS and background-image with sizing method set to contain .

You can however do pure CSS and use <img /> tag to load the svg because Images keep proportions when scaled.

First you'll need to to add the img tag in the .building

Make your markers 0x0px wide and tall and give them negative margin offset by half the width and height.

That way the center of the marker will always be your anchor when your use percentages. (Provided you use top % and left %. In your case you use bottom % so you need to add 15px)

Set display of .building to inline-block -- that way it always "wraps around" the image.

You'll now have a responsive image that you can control the width of trough .building{width:XX%}

Demo

.building {
  width: 100%;
  position: relative;

  img{
    width:100%;
  }

  &__item {
    position: absolute;
    z-index: 50;
    width: 0;
    height: 0;
    margin-left: -15px; //sub half of width
    margin-top: 15px; // add half of height
    ...

That's as far you'll get using pure CSS. For anything more advanced use jQuery and a Responsive Hotspot Plugin

Good luck!

Answer 2

If you have the original width and height of the image and an initial position of your marker, you can calculate the new x position of the marker by doing this:

newX = (initialX / originalWidth) * newWidth

Same thing goes for the y position.

Here is a simple example using JS to recalculate the position, whenever the window resizes.

Let's stick the marker to the basketball ;)

 var img = new Image() var wrapper = document.getElementsByClassName('wrapper-inner')[0] var marker = document.getElementsByClassName('marker')[0] var initialPos = {x:740, y:555} var padding = 25 var imgW = 0 var imgH = 0 img.onload = function() { wrapper.firstElementChild.src = this.src imgW = this.width imgH = this.height resize() } img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Finish_%28235964190%29.jpg/1024px-Finish_%28235964190%29.jpg' function resize() { var imgRect = wrapper.getBoundingClientRect(); marker.style.left = ((initialPos.x/imgW) * imgRect.width) - padding + "px" marker.style.top = ((initialPos.y/imgH) * imgRect.height) - padding + "px" } window.onresize = resize 

 body { margin: 0; } .wrapper { text-align: center; } .wrapper-inner { display: inline-block; font-size: 0; position: relative; } .wrapper-inner img { width: 100%; height: auto; } .marker { font-size: 32px; color: red; font-weight: bold; border-radius: 25px; line-height: 1.5; width: 50px; height: 50px; background: white; position: absolute; left: 0; top: 0; z-index: +1; } 

 <div class="wrapper"> <div class="wrapper-inner"> <img src="" alt=""> <span class="marker">&starf;</span> </div> </div>