title: jQuery - Parallax Effect for background image
body: <p>Ok so I have a div class that acts as a 'section' on my site. I have given it a background image with the following css:</p>
  
  <pre><code>.section-one {
      width: 100vw;
      height: 100vh;
      background-image: url(images/outside-shot-edited.png);
      background-position: center;
      background-size: cover;
  }
  </code></pre>
  
  <p>and would like to apply a parallax effect on it so that when the user scrolls, the image scrolls but at a slower pace.</p>
  
  <p>Is it possible to do this with jQuery for a div using <code>background-image</code>?</p>
  
  <p>I don't want anything too complex but just something to add a bit of dynamic movement to the site.</p>
  
  <p>Any suggestions are welcome, I have tried the following but it didn't work...</p>
  
  <pre><code>function parallax(){
      var scrolled = $(window).scrollTop();
      $('.section-one').css('top', -(scrolled * 0.5) + 'px');
  }
  
  
  
  $(window).scroll(function(e){
      parallax();
  });
  </code></pre>