title: How does background-position: x% work with background-image?
body: <h1>Idea</h1>
  <p>I'm making animation with <code>background-image: linear-gradient</code> but sadly, CSS  can not animate gradient propertive. So i come up with <code>background-postion</code> solution. The idea is creating a <code>background-image</code> with 3x size of the element and move the <code>background-postion</code> during the trasition.</p>
  <h1>Problem</h1>
  <p>To set the <code>background-position</code> i can use <code>px</code> or <code>%</code> but they work really different. Please look at the example below</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let elementPixel = document.getElementById('background-pixel');
  let elementPercent = document.getElementById('background-percent');
  let inputPixel = document.getElementById('range-pixel');
  let inputPercent = document.getElementById('range-percent');
  let labelPixel = document.getElementById('label-pixel');
  let labelPercent = document.getElementById('label-percent');
  
  inputPixel.addEventListener('input', (event) =&gt; {
    elementPixel.style.backgroundPosition = `0 ${inputPixel.value}px`;
    labelPixel.innerHTML = `background-position: ${inputPixel.value}px`
  })
  inputPercent.addEventListener('input', (event) =&gt; {
    elementPercent.style.backgroundPosition = `0 ${inputPercent.value}%`;
    labelPercent.innerHTML = `background-position: ${inputPercent.value}%`
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.background-animateable {
    margin: 50px;
    border: solid 1px black;
    width: 200px;
    height: 200px;
    background-image: linear-gradient(to bottom, white 0%, red 32.9%, yellow 33%, yellow 34%, red 34.1%, green 65.9%, yellow 66%, yellow 67%, green 67.1%, blue 100%);
    background-repeat: no-repeat;
  }
  
  .wrapper1 {
    display: flex;
    align-items: center
  }
  
  .wrapper2 {
    display: flex;
    width: 100%
  }
  
  .wrapper2 .background-animateable {
    background-size: 100% 300%;
  }
  
  .parent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .parent input {
    margin-top: 10px;
  }
  
  #background-pixel {
    background-position: 0 0px;
  }
  
  #background-percent {
    background-position: 0 0%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper1"&gt;
    &lt;div class="background-animateable"&gt; &lt;/div&gt;
    &amp;larr;Origin background look like this
  &lt;/div&gt;
  
  &lt;div class="wrapper2"&gt;
    &lt;div class="parent"&gt;
      &lt;div class="background-animateable" id="background-pixel"&gt;&lt;/div&gt;
      &lt;label id="label-pixel"&gt;background-position: 0 0px&lt;/label&gt;
      &lt;input type="range" id="range-pixel" name="volume" min="-600" value="0" max="600" /&gt;
    &lt;/div&gt;
    &lt;div class="parent"&gt;
      &lt;div class="background-animateable" id="background-percent"&gt;&lt;/div&gt;
      &lt;label id="label-percent"&gt;background-position: 0 0%&lt;/label&gt;
      &lt;input type="range" id="range-percent" name="volume" min="-200" value="0" max="200" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Just play with the snipet. <br><br>
  If we set <code>background-postion</code> in <code>px</code>, negative value means background will stay higher than the element and we can see other part of <code>background-image</code>, positive value will make background lower than element so we will see the blank <code>background-color</code>. It's deserved behavior. <br><br>
  When we set <code>background-postion</code> in <code>%</code>, the first thing come in my head is it will be same as 'px' and the distance will be base on background size. But, no! If we want to see <code>33%-&gt;66%</code> of the background image we need to set <strong><code>background-position: 0 50%</code></strong> meanwhile the value in <code>px</code> is <strong><code>background-position: 0 -200px</code></strong>. What's happen? It's opposite about sign, and about the value <code>200px ~ 33.33%</code> height of <code>background-image</code> not <code>50%</code>. Hmm, it's really confuse here.</p>
  <h1>Question</h1>
  <p>So the question is: How does <code>background-postion: ...%</code> work with <code>background-image</code>?<br>
  Note that: If we change <code>linear-gradient</code> with image <code>url</code>, the behavior will bee still the same</p>