title: Objects follow responsive background-image
body: <p>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 background-image. This is of couse easy if the background-image has a static size, but this need to be responsive with the effect of background-size: cover.</p>
  
  <p>I've tried positioning them both with pixels and percentage, but since background-size: cover alters both witdh and height of the image, this becomes difficult.</p>
  
  <p>Anyone have any solution to this?</p>
  
  <p>I'll inlude a little Jsfiddle so you can see what i mean: </p>
  
  <p><a href="https://jsfiddle.net/jynf21kw/1/" rel="nofollow">https://jsfiddle.net/jynf21kw/1/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
          margin:auto;
          text-align: centeR;
      }
      .background{
          
      }
      .bg{
          background-size:cover;
          height:500px;
          position: relative;
          overflow: hidden;
      }
      .poi{
          height:50px;
          width:50px;
          position:absolute;
      }
      .poi:after{
          font-family: FontAwesome;
         content: "\f067";
         color:green;
         font-size: 30px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="no"&gt;
  
  &lt;head&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;style&gt;
      
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
   &lt;header id="header" class="header"&gt;
       &lt;h1&gt;Header&lt;/h1&gt;
   &lt;/header&gt;
  
  
   &lt;div class="background"&gt;
      &lt;div class="bg"  style="background-image: url('http://i.imgur.com/HmjQ2tj.jpg');"&gt;
          &lt;div class="poi-container"&gt;
              &lt;div class="poi" style="left:33%;top:33%;"&gt;&lt;/div&gt;
              &lt;div class="poi" style="left:564px;top:497px;"&gt;&lt;/div&gt;
              &lt;div class="poi" style="left:1132px;top:36px;"&gt;&lt;/div&gt;
              &lt;div class="poi" style="left:1332px;top:336px;"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;section class="other"&gt;
     &lt;h2&gt;Some other content&lt;/h2&gt;
  &lt;/section&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>