title: Position element over background image. But the BG img changes size with the window. CSS
body: <p>I have a background image which changes size to the windows size, and I need to position an element on it so that it is always in the same place relative to the background image.</p>
  
  <p>HOW!?</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>background:url("http://placehold.it/100x100") no-repeat center center fixed;
  -webkit-background-size:"cover";
  -moz-background-size:"cover";
  -o-background-size:"cover";
  background-size:"cover";
  </code></pre>
  
  <p>The background image covers the entire background and changes size with the window but keeps proportions by having some overlay.</p>
  
  <p><strong>EDIT - 2016</strong></p>
  
  <p>My solution to this with pure CSS is to position the element in the middle and then offset it correctly using calc function. And then to resize it accordingly i use the vmin value:</p>
  
  <pre><code>$offset-top: ...;
  $offset-left: ...;
  
  .element {
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + #{$offset-top}), calc(-50% + #{$offset-top}));
    width: 50vim; 
    height: 50vim;
  }
  </code></pre>