title: background-position percentage not working
body: <p>Everywhere I read says this should be working fine, but for some reason it's not. </p>
  
  <p>This was to fix someone else's issue so fixing it doesn't matter to me, I just want to know why. The problem is on <code>.br .bg-image</code>. I know I'm trying to use <code>calc()</code> but using a simple <code>background-position: 50%</code> doesn't work either.</p>
  
  <p><a href="http://jsfiddle.net/uLaa9fnu/2/" rel="noreferrer">http://jsfiddle.net/uLaa9fnu/2/</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>html {
    height: 100%;
    width: 100%;
  }
  body {
    margin: 0px;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  .bg-image {
    height: 600px;
    width: 800px;
    background-image: url('http://media1.santabanta.com/full1/Outdoors/Landscapes/landscapes-267a.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .relative {
    position: relative;
  }
  .containeroverlay {
    background-color: rgba(0, 0, 0, 0.6);
    height: 100%;
    width: 100%;
  }
  .framesizer {
    height: 340px;
    width: 300px;
    overflow: hidden;
    position: absolute;
  }
  .frame {
    background-image: url('http://i.imgur.com/4AcIXsD.png');
    background-repeat: no-repeat;
    background-size: 100%;
    height: 340px;
    width: 300px;
  }
  .tl {
    top: 30px;
    left: 30px;
  }
  .tl .bg-image {
    background-position: right 30px bottom 30px;
  }
  .br {
    top: calc(100% - 340px - 30px);
    /* Height of frame, plus 30px spacing */
    left: calc(100% - 300px - 30px);
    /* Width of frame, plus 30px spacing */
  }
  .br .bg-image {
    background-position: right calc(800px - 300px - 30px) bottom calc(600px - 340px - 30px);
    /* Background Position doesn't like percentages for some reason */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="bg-image"&gt;
    &lt;div class="containeroverlay relative"&gt;
      &lt;div class="framesizer tl"&gt;
        &lt;div class="bg-image"&gt;
          &lt;div class="frame"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="framesizer br"&gt;
        &lt;div class="bg-image"&gt;
          &lt;div class="frame"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>