Add A Background Image to a NextJS App

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

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
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.

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 && next build

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

npm run start

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.

Next.js background image

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.

Next.js file structure

Here’s what our file tree looks like. Double click index.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:

export default function Home() {
  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',
        }}/>
      </>
  )
}

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.

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

Next.js background image

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!