Add these scripts to the header tag
<script src="/assets/js/gsap.min.js"></script>Put the parallax image in with an img tag. Use picture tag for mobile flexibility.
Adjust data-speed as needed.
<picture> <source media="(max-width: 800px)" srcset="/assets/images/titlebar-m.jpg"> <source media="(max-width: 1100px)" srcset="/assets/images/titlebar-t.jpg"> <img src="/assets/images/titlebar.jpg" alt="" class="parallaxbg" data-speed="-.2"> </picture>To lazyload the parallax image:
<picture> <source data-srcset="/assets/images/hexagon-m.jpg 430w" media="(max-width: 800px)" /> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/assets/images/hexagon.jpg" class="lazyload parallaxbg" alt="white hexagon pattern" data-speed=".2"/> </picture>Add these styles for the img:
position: absolute; width:100%; height:100%; left:0; top:0; object-fit: cover;
* Other script needed is already in the additional scripts file