I have a WordPress website running. I am trying to design something unique. I want to change color on my page when users scroll the page. I was able to do that successfully with this code.

JS code

<script type="text/javascript">
jQuery(document).ready(function( jQuery ) {
    jQuery(window).on('scroll touchmove', function() {

        if (jQuery(document).scrollTop() >= jQuery('#one').position().top) {
            jQuery('body').css('background', jQuery('#one').attr('data-color'));
        }

        if (jQuery(document).scrollTop() > jQuery('#two').position().top) {
            jQuery('body').css('background', jQuery('#two').attr('data-color'));
        }


    });
})(jQuery);
</script>

Here I have five sections and I gave IDS to all five sections and the code works fine.

When the page loads first This is the CSS that I used

body {
  background:#333333;
  transition: all 1200ms ease-out;
  will-change: background;
}

CSS color attributes for my two sections.

data-color|#000000, data-color|#231E81 (I added one code per section through elementor)

Everything works well. However, I want to show a background image to entire page and when users scroll I want to show that image as well. Like color is changing when scroll but image should show in the background as well. Right now, when there is a background image it only shows the image color is not changing.

To simplify this question I added a video to show how exactly I want. https://ufile.io/m2puc40i