Image (location pins) on top of background image - html

Question

i have location pins on top of background image.
but when its responsive pins location chages.
i want set pins at specific position of images
<div class="container">
<img src="http://www.clipartbest.com/cliparts/ncX/qyL/ncXqyLdcB.png" class="pin1">
<img src="http://www.clipartbest.com/cliparts/ncX/qyL/ncXqyLdcB.png" class="pin2">
</div>
css
body {
background: url(http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg) no-repeat center center fixed;
/* -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;*/
color: white;
font-family: 'Open Sans', 'Nunito', sans-serif;
}
.pin1 {
position: absolute;
width: 30px;
height: auto;
top: 10%;
left: 28%;
}
.pin2 {
position: absolute;
width: 30px;
height: auto;
top: 40%;
left: 50%;
}
i am trying to set position but its not working

Answer 1

Don't use a background image as it's not responsive in the same way as positioning. Use an actual inline image in a wrapper and position your pins on that.
Here's an example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-align: center;
}
.map {
margin: 10px;
border: 5px solid red;
position: relative;
display: inline-block;
}
.map img {
max-width: 100%;
display: block;
}
.box {
width: 8%;
height: 8%;
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: 29%;
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-text h3 {
color: white;
text-shadow: 1px 1px 1px #000;
}
<div class="map">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Pleasant_View_housing_development%2C_Missoula%2C_Montana_-_panoramio.jpg/800px-Pleasant_View_housing_development%2C_Missoula%2C_Montana_-_panoramio.jpg" alt="" />
<div id="pin-1" class="box">
<div class="pin-text">
<h3>My House</h3>
</div>
</div>
</div>