title: Image (location pins) on top of background image
body: <p>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</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;img src="http://www.clipartbest.com/cliparts/ncX/qyL/ncXqyLdcB.png" class="pin1"&gt;
    &lt;img src="http://www.clipartbest.com/cliparts/ncX/qyL/ncXqyLdcB.png" class="pin2"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>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%;
    }
  </code></pre>
  
  <p>i am trying to set position but its not working</p>