title: Background-position negative percentage values
body: <p>I want to give my header a background-image when a class gets changed, and smoothly animate in the background. Because the element (in my case - not in the example below) has a variable height, I want to use percentages to offset the background-position outside the element so it can smoothly scroll in once that class changes. The following code, however, stumped me a bit:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var test = document.getElementById("test");
  var span = document.getElementById("change");
  
  setInterval(function(){
    test.className = test.className.indexOf("test") &gt;= 0
      ? test.className.replace("test", "").replace("  ", " ").trim()
      : (test.className + " test").trim();
  },3000);
  
  test.addEventListener("click", function(event){
    var testing = test.className.indexOf("in-pixels") &gt;= 0;
    span.innerHTML = testing ? "pixels" : "percentages";
    test.className = testing
      ? test.className.replace("in-pixels", "").replace("  ", " ").trim()
      : (test.className + " in-pixels").trim();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#test {
      border: 1px solid #000;
      cursor: pointer;
   width: 200px;
   height: 200px;
   background-image: url(http://placehold.it/200x200);
   background-size: auto 100%;
   background-repeat: repeat-x;
   background-position: 0% -100%;
   -webkit-transition: background-position 500ms;
      -moz-transition: background-position 500ms;
    -ms-transition: background-position 500ms;
     transition: background-position 500ms;
  }
  #test.test {
   background-position: 0% 0%;
  }
  #test.in-pixels {
   background-position: 0% -200px;
  }
  #test.in-pixels.test {
   background-position: 0% 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="test"&gt;&lt;/div&gt;
  &lt;p&gt;Click above to change to &lt;span id="change"&gt;pixels&lt;/span&gt;&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><em>The above is an eternal loop that will activate the testing class. Clicking on the box will change the set CSS value from percentage to pixels and back, illustrating the issue as the animations starts back up when pixels get applied, but dies down once you take that off again.</em></p>
  
  <p>Why does setting the <code>background-position</code> to a negative percentage value not work here [correction: neither negative <em>nor</em> positive percentage values work], but setting it to a pixel value <em>does</em> work? According to the documentation (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-position" rel="nofollow">MDN</a>), <code>background-position</code> can have negative <code>%</code> values, and it works in pixels, so what going on here?</p>
  
  <p><em>I am using Safari 8.0.2 and also tested this on Chrome 41.0.2272.118 (64-bit), Mac</em></p>