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: :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.