How to add GIF as full page background in Next.js

https://www.youtube.com/watch?v=r_b5dbJyNVQ&t=1s

As you have landed on this blog, means you are excited about trying this out and that's the sole motivation behind coming up with this blog and guide with how to add GIF as full page background in Next.js.

We are not going to discuss how to create and setup a next.js project. Arrange file folders how ever you like to doesn't even matter. But if you need help with setting up - here's how to start your Next.js project.

Now I use tailwind CSS always for all of my project. And for that purpose I use pre existing global.css file present in styles folder and import global variables in it. Here's how to setup tailwind CSS 3 in Next.js project

/* styles/globals.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

This CSS file is already connected to the appropriate .js/.jsx/.tsx files in the project, so if you haven't deleted that your work will be way simpler. Add the background image in the public folder ( you can create sub directories here according to your project requirement)

public
|--bg.gif
styles
|--global.css

Now in the global.css file add this piece of code

body {
    margin: 0 0;
    background-image: url('../public/bg.gif');
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

That's it. Seriously simple CSS style can solve the issue. More properties related to CSS background image. Though if you want to create background as a CSS class just use .bg instead of body tag and go to _app.js in the pages directory and change the dive to

import styles from '../styles/globals.css'

function MyApp({ Component, pageProps }) {
    return (
        <div className={styles.bg}>
             <Component {...pageProps}/>
        </div>
    )
}

export default MyApp

Similarly there are tons of other way to call this class but not going in depth with those right now. It was client project so you can see the final result here. . Here's a screenshot as well

Up-2-sumin-5 - Laptop with HiDPI screen - 2022-3-1 at 9.25 1.png