Background parallax code injection works on home page but causes bleed for other pages on site

Site URL: http://sturmer.com.au/stories

Hi there,

I've applied some code in the code-injection section of my site wide footer to enable a parallax effect on the background images of my homepage (http://sturmer.com.au/) but it is causing problems on another page (http://sturmer.com.au/stories) by having the background images from the third section down bleed into other sections above.

I have tried pasting the site-wide footer code directly onto the homepage 'page' on a per-page basis but this only seems to affect the header.

Is there anyone able to assist and work out why this might be the case?

Thanks so much for your help

Hi,

Can you paste the code here? We can test it easier

1 hour ago, tuanphan said:

Hi,

Can you paste the code here? We can test it easier

Quote

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>

<script> 
  $('.has-background:not(:has(.sqs-video-background))').each(function() {
    var findImage = $(this).find('.section-background img');
    var imgUrl = findImage.data('src') + '?format=2500w';
    var dimensions = findImage.data('image-dimensions');
    var imgWidth = dimensions.substr(0, dimensions.indexOf('x'));
    var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1);
    $(this).parallax({
        bleed: 0,
        imageSrc: imgUrl,
        naturalWidth: imgWidth,
        naturalHeight: imgHeight,
        speed: .5,
    })
});
document.getElementsByTagName("body")[0].onresize = function() {
    setTimeout(function() {
        jQuery(window).trigger('resize').trigger('scroll')
    }, 100)
}; 
</script>

<style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style>

Hi tuanphan,

Here’s what I think is the problematic code - works on the home page but causes issues on the /stories page. 
 

thanks for your help