title: Parrallax background positioning incorrect
body: <p>I am trying to fix our parallax effect on our demo site however for the life of me I cannot get it working correctly. The parallax effect works perfectly however the positioning of the image repeats below. The issue occurs when the browser window is not full width.</p>
  
  <pre><code>background: URL(http://www.oddpandadesign.co.uk/albaband/wp-content/uploads/2014/03/parallax_head.png) 50% 0 fixed;
  background-size: cover;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>  jQuery(document).ready(function(){
         // cache the window object
         $window = jQuery(window);
  
         jQuery('section[data-type="background"]').each(function(){
           // declare the variable to affect the defined data-type
           var $scroll = jQuery(this);
  
            jQuery(window).scroll(function() {
              // HTML5 proves useful for helping with creating JS functions!
              // also, negative value because we're scrolling upwards                             
              var yPos = -($window.scrollTop() / $scroll.data('speed')); 
  
              // background position
              var coords = '50% '+ yPos + 'px';
  
              // move the background
              $scroll.css({ backgroundPosition: coords });    
            }); // end window scroll
         });  // end section function
      }); // close out script
  
      /* Create HTML5 element for IE */
      document.createElement("section");
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/TY1WF.jpg" alt="enter image description here"></p>
  
  <p>I am not sure if its the image (though we have tried several) or the code is incorrect.This is not the first experience with parallax and it generally is simple so im a bit confused</p>
  
  <p>Thanks for any help</p>