Streaming live at 10am (PST)

Creating Dynamic Header Background That Matches The Website Image Background As You Scroll


I am building an eCommerce site and I WANT the header to have a background that matches the background of my site as you scroll (So that it looks like the header background is the website background, except covering content). Normally this is easy because the background of the website is white or a static image, but in my case, I have a picture that moves with the content as you scroll, and therefor the header background has to move to match the movement of the website background. (I hope I explained that okay)

I would prefer a Webflow solution however custom code might be necessary. My thought for custom code would be to create a div mask around an image that matches(and scrolls with) the website background and then move the div mask to the header with the fixed position(not sure how to code this however).

Additionally, if it is possible to make the header background fade into the site background that would be the best solution.


Here is my site Read-Only: LINK