Add A Background Image to a NextJS App

by

One of the first things we do when starting off a new application is get our background squared away. This article will cover how to add a background image to a NextJS app.

My Setup

  • Operating System = macOS Ventura
  • MacBook Pro
  • Next.js v13.1.1

Setting Up Our Basic NextJS App

Webstorm

Sooo, I use Webstorm. So rather than going the CLI route, I tend to use Webstorm’s “new project” gui. It looks like the following.

Webstorm new project GUI

Go ahead and click NextJS, fill in your project name, select whether you want Typescript or not, and click create at the bottom right. This should scaffold out a basic NextJS project.

NextJS CLI

Alternatively you can create a new NextJS app using the cli. The lift is low in both cases. Run the following from your terminal.

yarn create next-app

This will prompt you for stuff like project name and will create a new directory. Follow the prompts and you shouldn’t hit problems.

***IMPORTANT***

There’s a new React router that is set by default during yarn create next-app. Please select “Pages Router” during the router promt when spinning up your project so that your file tree looks like what we have in our photos.

Starting Your App

So, you spun up the scaffolding for your app above. From the directory run the following to get your app running on localhost.

npm install && npm run dev

Wait a few minutes for the dependencies to be installed then run the following.

This should get your basic app running at https://localhost:3000.

What Photo Will We Use?

I’ve decided to use a photo hosted by Wikimedia Commons. Think wikipedia but for photos and you can filter by usage rights. We filtered to no usage restrictions which is why we’ll be leveraging our specific photo. We also picked according to our aesthetic preferences. Here’s the photo we’ll use.

Setting Your NextJS Apps Background

One of the cool things about NextJS is that it comes with routing out of the box that matches your file tree in pages. This will help a ton while we add a background image to a NextJS app.

Here’s what our file tree looks like. Double click /pages/_app.tsx or jsx if you’re not doing Typescript. The scaffolding tool will have filled this file with some text. We can go ahead and delete everything in the file. Make sure to not delete the file, just the text. Now, you can copy and paste the following into the file:

import '@/styles/globals.css'

export default function App({Component, pageProps}) {
    return (
        <div style={{
            backgroundImage: `url("https://upload.wikimedia.org/wikipedia/commons/e/e0/Grass_at_a_lawn_with_morning_dew_02.jpg")`,
            height: "100vh",
            backgroundRepeat: "no-repeat",
            backgroundSize: "cover",
        }}>
            <Component {...pageProps} />
        </div>
    );
}

Our background URL gets passed to the backgroundImage param. Make sure to wrap the path with “url(“”)” as shown above. The height param we pass ensures that our photo fills the entire height of our viewport or screen. The backgroundRepeat param ensures we avoid tiling of the photo. The backgroundSize param also ensures your entire screen gets filled.

<Component {...pageProps} /> represents out entire application.  So your're wrapping you're entire application in a dev who's background is this grass image.  All new pages will have components show up over this image.

For teaching purposes, I’ve added some text to show you that I’ve infact created a NextJS app with a photo background.

I hope this helps kick off your new NextJS application. I’ll go over centering text in NextJS in a future post. Hint, it’s pretty close to centering text in React Native. Happy coding!

Exit mobile version