title: background position more than 100% works different why?
body: <p>I have a problem with background positioning.
  I want background image moves out of it's container and i want to do it with background-position: 150% center for example.
  Now the problem is in different resolutions, these % values have differences.
  For example, in 1360px resolution, my background image moves out with value of 175% of horizontal.
  But in 360px resolution, my background image moves out with value of 4500% of horizontal.
  Do you have any solution for this problem?
  thank you.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.airplane{
      width: 100%;
      height: 126px;
      background-image: url("../img/book.png");
      background-repeat: no-repeat;
      position: absolute;
      background-position: 175% center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="book"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>