How to Use Tailwind Image Background on Next Js

Rainer Regan
4 min readApr 25, 2024

Next Js is one of the most popular web application frameworks with react-based language. Tailwind, on the other hand, is used by a lot of developers for easier use of CSS by only using a set of classes directly to the DOM.

Prerequisites

I will assume that you already have knowledge in Tailwind and NextJs. To follow this tutorial, you also need a Next Js project with Tailwind installed.

Step 1 — Copy the Image to Public Folder

Firstly, you need to prepare the image and copy it into the public folder, so your file structure will look like this:

./
└── next-web/
├── README.md
├── next-env.d.ts
├── next.config.mjs
├── node_modules/
├── package.json
├── postcss.config.mjs
├── public/
│ ├── hero-bg.png <----- THIS IS YOUR IMAGE
│ ├── next.svg
│ └── vercel.svg
├── src/
├── tailwind.config.ts
├── tsconfig.json
└── yarn.lock

Option 1 — Using Tailwind Arbitrary Value

Tailwind provides us with a very useful utility that allows us to create a custom value for the styling by directly injecting the value on the class list.

We can use brackets “[]” on the class name to inject the value.

For this case, we can use the bg-... class and CSS URL utility, it will look like this:

bg-[url("your-image-path")]

Your code will look like this:

const Hero = () => {
return (
<div className='... bg-[url("/hero-bg.jpg")]'>
...
</div>
)
}

After refreshing the page, your page will look like this. Tailwind will add the image into the background via URL.

Option 2 — Create a Custom Styling

Arbitrary value is good for quick styling, but it will be a mess if you have a long name for the file, or if you want to re-use the background image. By creating a custom styling you can use a custom class name and re-use it anytime on any components of your project.

First, you need to open your tailwind config file on the root. This file is called “tailwind.config.ts”.

You will see a default config like this:

import type { Config } from "tailwindcss";

const config: Config = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
},
},
plugins: [],
};
export default config;

You can see that Tailwind has already given us an example of how to use a theme extension for a background image.

theme: {
extend: {
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
},
},

In this case, Tailwind has created a custom class for a gradient. We can delete the gradient-radial and gradient-conic objects and replace them with our own.

backgroundImage: {
"hero-image": "url('/hero-bg.jpg')"
},

So, the final config will looks like this

import type { Config } from "tailwindcss";

const config: Config = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
backgroundImage: {
"hero-image": "url('/hero-bg.jpg')"
},
},
},
plugins: [],
};
export default config;

After saving the config, you can use the custom class on your component

const Hero = () => {
return (
<div className='... bg-hero-image'>
...
</div>
)
}

This will give the same result

Conclusion

Using Tailwind CSS will make your front-end development much easier, yet, you still should have a good understanding of how CSS works. Using a custom image for the background in Tailwind is easy, you can utilize the arbitrary values in Tailwind to inject the URL directly. Another option to use a background image is by using custom styling to create a custom class. By using this technique, you can re-use the class on your other component, so you don't need to re-type the URL again and again.

Thank you and happy coding!

--

--

Rainer Regan
Rainer Regan

Written by Rainer Regan

Hi, I'm a software engineer, I write articles to share my experiences in software engineering. Founder of Exacode Systems. https://exacode.io

No responses yet