htmlscrolltailwind-cssparallaxparallax.js

How to make one fixed background with parallax scrolling

Is it possible to have one fixed video gif page and then when I'm scrolling things just add up on that fixed video gif page.So it will be only one page but things will be adding up when user is scrolling.

enter image description here

Solution

  • Answer

    You have to use bg-scroll. Here an example to achieve what you want:

    <div class="h-screen bg-cover bg-scroll overflow-auto" style="background-image: url('your_gif_here.gif')">
    Your page content
</div>

    Now your background is fixed and full page wide and your content instead can be scrolled on top of the background.

    Here a simple demo on Tailwind Play.

    Let me know how it goes! :)