title: Smoothing the parallax scrolling of a background image
body: <p>I've done a bit of research and written a simple bit of jQuery that scrolls the background at a slightly different pace to the foreground, creating a parallaxing effect as you scroll down a website. </p>
  
  <p>Unfortunately it's a bit jerky.</p>
  
  <p>Here's the basic layout of the HMTL:</p>
  
  <pre><code>&lt;body&gt;
      &lt;section&gt;
          Site content goes here.
      &lt;/section&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Here's the CSS:</p>
  
  <pre><code>body {
      background-image: url('../images/bg.png');
      background-repeat: repeat-y;
      background-position: 50% 0;    
  }
  </code></pre>
  
  <p>Here's the JS:</p>
  
  <pre><code>$(window).scroll(function () {
      $("body").css("background-position","50% " + ($(this).scrollTop() / 2) + "px");
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/JohnnyWalkerDesign/ksw5a0Lp/" rel="noreferrer">https://jsfiddle.net/JohnnyWalkerDesign/ksw5a0Lp/</a></p>
  
  <p>Pretty simple, but my problem is that it's a bit jerky when you scroll, even on a powerful computer. </p>
  
  <p>Is there a way to make the background parallax animate smoothly?</p>