How To Show Background Image In Tailwind CSS Using React Dynamic Url?

Tailwind CSS is a utility-first framework that uses preset classes to greatly speed up styling. However, utility classes are insufficient when handling dynamic content such as background graphics. We'll demonstrate how to use Tailwind CSS for layout and styling in a React component while managing dynamic URLs.

Approach

In this article, we will show you how to use React and Tailwind CSS to set a dynamic background image. By combining React’s inline style property for dynamic URLs with Tailwind’s utility classes for layout and styling, you can quickly and easily create a flexible background that can change based on user input or data. We'll guide you through setting up a React project with Tailwind CSS and explain how to implement this dynamic background image step by step. This approach makes it simple to enhance your web app’s visual appeal while keeping the code clean and manageable.

Steps To Create

Step 1: Create a New React Project

First, set up a new React project if you haven't already:

npx create-react-app dynamic-bg-app
cd dynamic-bg-app

Step 2: Install Tailwind CSS

Next, install Tailwind CSS and configure it in your project:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

This will generate a tailwind.config.js file. Open this file and configure the content section to include all the necessary files:

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

Project Structure:

Updated Dependencies:

dependencies: {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.47",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "tailwindcss": "^3.4.13",
    "web-vitals": "^2.1.4"
  },

Step 5: Configure Tailwind in Your Project

Open the src/index.css file and replace its contents with the following to include Tailwind’s base, components, and utilities:

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

Step 4: Create a React Component with Dynamic Background

Let's now create a component that uses a dynamic URL to set a picture as the backdrop. Tailwind CSS will be used for layout and placement, and the style property will be used to apply the background image.

// src/components/DynamicBackground.js
import React from 'react';

const DynamicBackground = ({ imageUrl }) => {
    return (
        <div
            className="w-full h-screen bg-cover bg-center
                       flex justify-center items-center"
            style={{ backgroundImage: `url(${imageUrl})` }}
        >
            <h1 className="text-white text-4xl font-bold">
                Welcome to Dynamic Background!
            </h1>

        </div>
    );
};

export default DynamicBackground;

Step 5: Use the Component in Your App

Now, import and use the DynamicBackground component in your main App.js file.

// src/App.js
import React from 'react';
import DynamicBackground from './components/DynamicBackground.js';

function App() {
    const imageUrl = 
'https://media.geeksforgeeks.org/wp-content/uploads/20241003123526/bgpic.jpg';

    return (
        <div className="App">
            <DynamicBackground imageUrl={imageUrl} />
        </div>
    );
}

export default App;

Output: Here, imageUrl can be any dynamic URL, either from an API, user input, or any other source.

Conclusion

React's inline style features combined with Tailwind's utility classes make it simple to set a dynamic background image using Tailwind CSS. You can manipulate the image's display using Tailwind's background utilities (cover, contain, and position), and you can incorporate dynamic content, like background images, into your component using React's inline style attribute.