Search code examples
cssparallax

Parrallax background positioning incorrect

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.

background: URL(http://www.oddpandadesign.co.uk/albaband/wp-content/uploads/2014/03/parallax_head.png) 50% 0 fixed;
background-size: cover;

jQuery

  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");

enter image description here

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

Thanks for any help

Solution

  • I had to change

     background: URL(http://www.oddpandadesign.co.uk/albaband/wp-content/uploads/2014/03/parallax_head.png) 50% 0 fixed;

    to 

    background: URL(http://www.oddpandadesign.co.uk/albaband/wp-content/uploads/2014/03/parallax_head.png) fixed;
background-position: center top!important;