Recreating this effect on a hero image

[Taylor_Pany]

Hey guys, I love the effect that I’m seeing when you open this example that Evolve provided - https://arqinnovation.evolveauthoring.com/courses/67de065f7a3ee1715c792465/shared/index.html#/page/67de14a17a3ee1715c7950f3 - the GIF in the background, the PNG overlapping it and then the parallax scroll, but I’m having trouble recreating it.

I’ve tried a few different routes, but I’m stuck - it seems like the only way to get the parallax scroll to work is the upload the GIF into the hero field, and the PNG into the divider field, but then these appear as two separate elements instead over overlapping. (see screenshot)

Is there a way to fix that? Or perhaps, I’m going about this with the wrong approach. Any advice would help…thank you!

Goal: to get the GIF and PNG to overlap, then scroll with the parallax effect.

[hbailey]

Hi there!

Yes it’s fantastic isn’t it! Here’s how to do it…

In the page’s Page settings…

Under Page Hero Image set your hero image to the png with transparent background.

Under Page Background Image add the gif as the background image. Make sure you set it to Fixed Background Image in those settings too.

Let me know how it goes!