Hello members! I need to add my lottie animation file as background in the hero section and overlay text, search box and button over it. How we can achieve this.
Here is the website
@hazma_humayun, your site looks great! How did you end up achieving this? I’m trying to do something similar.
Hey how did you end up overlaying text over the lottie?
Thanks
I’ve done this in a few places on my site - sisulab.webflow.io - and it’s not too complicated. I set the section to be relative, added the desired background image to the section, then I added a wrapper div for the lottie which I left set to static and gave a height of 100%. The lottie file goes inside that div, also static. This much will make up the background section. Then the trick is to add another div to the section (in my case, “Easy content container”) and make it absolute and set to full (right under absolute) so it will cover the section. This is the foreground portion. All you do is just drop whatever you want into this new section and it will overlay the lottie.
