Objects Follow Responsive Background-image

I'm trying to make a banner image which will include 'points of interests' that you can hover over to see more. These points need to have a fixed position relative to the backgroun

Solution 1:

I have found that not using a background image is ideal but,instead, using an inline image with pins positioned on top.

The image is then made responsive in the usual way and the pins / markers can be positioned absolutely in relation to the image wrapper.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.map {
  margin: 10px;
  position: relative;
}
.mapimg {
  max-width: 100%;
  display: block;
}
.box {
  width: 5%;
  height: 5%;
  background-image: url(http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
}
#pin-1 {
  top: 25%;
  left: 36%;
}
.box:hover > .pin-text {
  display: block;
}
.pin-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 75%;
  white-space: nowrap;
  display: none;
}
.pin-texth3 {
  color: white;
  text-shadow: 1px1px1px#000;
}

<divclass="map"><imgsrc="http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg"alt="" /><divid="pin-1"class="box"><divclass="pin-text"><h3>My House</h3></div></div></div>