How to Add Background Image Overlay in Tailwind CSS?

Adding a background overlay to your Tailwind CSS project can help you create visually appealing layouts that layer content over the background image. In this article, we'll demonstrate how to add a background overlay using the Tailwind CSS utility class.

Approach

We will use Tailwind CSS to create a section with a background image. We will implement an overlay using:: before the pseudo-element or by adding a div to the overlay within the section. Tailwind's utility classes can handle styles, and this solution guarantees a responsive design. We will customize the color and opacity of the overlay to suit different designs.

Steps to Create & Configure the Project

Step 1: Create a New React Project

First, we must run the given command to create a new React project.

npx create-react-app bg-image-overlay-gfg
cd bg-image-overlay-gfg

Step 2: Install Tailwind CSS

When we create a new project We will need to install Tailwind CSS and create a configuration file named tailwind.config.js, we can do this by running the following command.

npm install tailwindcss postcss autoprefixer
npx tailwindcss init

Project Structure:

Updated Dependencies:

 "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },

Step 3: Configure Template Paths

Edit tailwind.config.js file to add content paths for your HTML and JavaScript files.

/* tailwind.config.js */
module.exports = {
    content: [
        "./src/**/*.{js,jsx,ts,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

Step 4: Add Tailwind Directives

In public/tailwind.css file, add base, components and utilities layers of Tailwind:

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

Step 5: Create the Component with Background Image and Overlay

Now let's create a component with a background image and overlay, add a new file called BackgroundSection.js in src/components folder.

// src/components/BackgroundSection.js
import React from "react";

const BackgroundSection = () => {
    return (
        <div className="relative h-screen bg-cover bg-center bg-no-repeat"
            style={{ backgroundImage:
"url('https://media.geeksforgeeks.org/wp-content/uploads/20241009154536548672/0_ilw552fVUGbwIzbE.jpg') ", }}>
            {/* Overlay */}
            < div className="absolute inset-0 bg-black opacity-50" ></div>
            {/* Content on top of overlay */}
            < div className="relative z-10 flex items-center justify-center h-full">
                <h1 className="text-white text-5xl font-bold text-center px-4">Welcome to GeeksForGeeks</h1>
            </div>
        </div >
    );
};

export default BackgroundSection;

Step 6: Add the Component to App.js

Next import and use BackgroundSection component in your src/App.js file.

// src/App.js
import React from 'react';
import BackgroundSection from './components/BackgroundSection';
import './index.css';

function App() {
    return (
        <div className="min-h-screen">
            <BackgroundSection />
        </div>
    );
}

export default App;

Step 8: Run the Application

Now you can start your development server.

npm start

Output: Open your browser and navigate to http://localhost:3000.