title: background position issue in parallax scrolling in javascript
body: <p>I have this common pattern of parallax scrolling with plain javascript that uses custom data attributes and scrolls the background image in the oposite direction.</p>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;header id="home" class="section" data-type="background" data-speed="3"&gt;&lt;/header&gt;
    &lt;section id="portfolio" class="section"&gt;&lt;/section&gt;
    &lt;section id="about" class="section"&gt;&lt;/section&gt;
    &lt;section id="contact" class="section"&gt;&lt;/section&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>  #home {
      background-color: grey;
      height: 100%;
      width: 100%;
      background-image: linear-gradient(to bottom, rgba(#000, 0.5), rgba(#000, 0.5)), url("../bg.jpg");
      background-attachment: fixed;
      background-repeat: repeat;
      background-position: 50%;
      background-size: cover;
      position: relative;
    }
  </code></pre>
  
  <p>JAVASCRIPT:</p>
  
  <pre><code>{
  
      function parallax() {
          Array.from(document.querySelectorAll('*[data-type="background"]')).forEach(e =&gt; {
  
              let yPos = -(window.pageYOffset / e.dataset.speed);
  
              var coords = `50% ${yPos}px`;
  
              e.style.backgroundPosition = coords;
          });
      }
  
      document.addEventListener('scroll', function () {
  
          parallax();
  
      });
  
  }
  </code></pre>
  
  <p>The issue is that this code calculates the Ypos variable and assigns it to the background position-y property. Actually it overrides the css which is set to 50% before you start scrolling. As a result the image goes from the center to the bottom once you start scrolling. I have included a codepen to see the problem.</p>
  
  <p><a href="https://codepen.io/anon/pen/pLvjqR" rel="nofollow noreferrer">https://codepen.io/anon/pen/pLvjqR</a></p>
  
  <p>Is there any way to add the yPos variable to the initialized background position 50% 50%, which means make it 50% 50%+ypos instead of 50% ypos.</p>
  
  <p>Thanks.</p>