How to Add Background Image Overlay in Tailwind CSS?

Last Updated : 11 Oct, 2024

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.

JavaScript

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

JavaScript

// 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;