Q:

Preserve position of elements in respect of background image while resize

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

A:

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!

