How can I add parallax to the banner image on my homepage?

[empiricalarby]

https://empiricalwater.com/

Just want to add parallax to the top image of the coffee. Thanks

[Dan-From-Ryviu]

Hi @empiricalarby

Could you explain a little more about your request?

[empiricalarby]

Yes, I want the elements above and below the banner image to move over the banner image slightly as the user scrolls down the page.

[Dan-From-Ryviu]

Do you mean header sticky when scroll?

[empiricalarby]

No, I mean like this: https://www.youtube.com/watch?v=GFJarqbMGnQ

Except I’m hoping I don’t need to rebuild my entire homepage as pagefly cannot modify existing pages.

[Dan-From-Ryviu]

Add this code to Custom CSS of your banner section

.banner__media {
background-image: url('https://empiricalwater.com/cdn/shop/files/New_b9891b18-5626-46fa-833a-46437fa9fbe1.jpg?v=1700516265&width=1500');
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
min-height: 500px;
}

[empiricalarby]

Thanks for the attempt - just one issue:

It says the link is invalid.

[Dan-From-Ryviu]

So please add code to your theme.liquid file before tag

[empiricalarby]

Unfortunately I’m not seeing any change as a result of applying that. Please check my screenshot to make sure I did it right:

[Dan-From-Ryviu]

Please update the code.

[empiricalarby]

This worked on desktop! Thank you. But can you also make it work on mobile? Currently it looks very zoomed in, without any movement.

[empiricalarby]

Here is a video of what it looks like on mobile:

On desktop it works great but on mobile

• Parallax effect not working
• Needs to be zoomed all the way out

Thank you