Open In App

How to set background images in ReactJS

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Background images can improve the UI and user experience of web apps by making the appearance better. These images can be some shape or shade using color gradients.

Many developers prefer using some sort of background image on their page, instead of the default plain white background. In this tutorial, we will look at different methods to add background images to your application in ReactJS.

How to Set a React Background Image

There are many methods to apply a background image to your web application in React. We will be discussing 5 easy methods to add background images in ReactJS.

Using Inline CSS to set Background Image in React

In this method, we add the style attribute inside the element itself.

Example 

This example uses a style attribute inside the div element and sets the background image for a div element using inline CSS.

Javascript




// Filename - App.js
 
import React, { Component } from "react";
 
class App extends Component {
    render() {
        const myStyle = {
            backgroundImage:
                "url('https://media.geeksforgeeks.org/wp-content/uploads/rk.png')",
            height: "100vh",
            marginTop: "-70px",
            fontSize: "50px",
            backgroundSize: "cover",
            backgroundRepeat: "no-repeat",
        };
        return (
            <div style={myStyle}>
                <h1> geeksforgeeks </h1>
            </div>
        );
    }
}
 
export default App;


Step to run the application: Open the terminal and type the following command.  

npm start

Output: Open the browser and our project is shown in the URL http://localhost:3000/

adding background image with inline css

Using External CSS to set Background Image in React

In this method, we add an external CSS file to set a background image for the React component.

Example

This example uses a simple div element with the className attribute. Also, we import an external CSS file to set a background image for the div element.

CSS




/* Filename: App.css */
 
.GeeksForGeeks {
    background-image: url(
    );
    background-size: "cover";
    height: 100vh;
    margin-top: -70px;
    font-size: 50px;
    background-repeat: no-repeat;
}


Javascript




// Filename - App.js
 
import React, { Component } from "react";
import "./App.css";
 
class App extends Component {
    render() {
        return (
            <div className="GeeksForGeeks">
                <h1>GeeksForGeeks</h1>
            </div>
        );
    }
}
 
export default App;


Step to run the application: Open the terminal and type the following command.  

npm start

Output: Open the browser and our project is shown in the URL http://localhost:3000/

adding background image with external css

Using Absolute URL to set Background Image in React

Users can access the background image directly from the public/ folder via absolute URL using the environment variable. Before using this method, don’t forget to add an image inside the public folder otherwise it will show you a compilation error.

Example

This example uses an environment variable to add the background image.

Javascript




// Filename - App.js
 
import React, { Component } from "react";
 
class App extends Component {
    render() {
        const myStyle = {
            backgroundImage: `url(${
                process.env.PUBLIC_URL + "/image.png"
            })`,
            height: "100vh",
            marginTop: "-70px",
            fontSize: "50px",
            backgroundSize: "cover",
            backgroundRepeat: "no-repeat",
        };
        return (
            <div style={myStyle}>
                <h1>GeeksForGeeks</h1>
            </div>
        );
    }
}
 
export default App;


Step to run the application: Open the terminal and type the following command.  

npm start

Output: Open the browser and our project is shown in the URL http://localhost:3000/

adding background image with absolute URL

Using Relative URL to set Background Image in React

Users can access images from the public/ folder or any child folder of the public folder via a relative path URL. The URL to access the image should be like <host_name>/image.png.

Example

This example uses the relative path of the image to set the required image as the background. 

Javascript




// Filename - App.js
 
import React, { Component } from "react";
 
class App extends Component {
    render() {
        const myStyle = {
            backgroundImage: "url(/image.png)",
            height: "100vh",
            marginTop: "-70px",
            fontSize: "50px",
            backgroundSize: "cover",
            backgroundRepeat: "no-repeat",
        };
        return (
            <div style={myStyle}>
                <h1>GeeksForGeeks</h1>
            </div>
        );
    }
}
 
export default App;


Step to run the application: Open the terminal and type the following command.  

npm start

Output: Open the browser and our project is shown in the URL http://localhost:3000/

adding background image with relative URL

Add background image from src/ folder in React

If the image resides inside the src directory, the user can import it inside the component filer and set it as the background image.

Example

This example imports the image from the project src directory and sets it as a background image of the div element.

Javascript




// Filename - App.js
 
import React, { Component } from "react";
import background from "./image.png";
 
class App extends Component {
    render() {
        const myStyle = {
            backgroundImage: `url(${background})`,
            height: "100vh",
            marginTop: "-70px",
            fontSize: "50px",
            backgroundSize: "cover",
            backgroundRepeat: "no-repeat",
        };
        return (
            <div style={myStyle}>
                <h1>GeeksForGeeks</h1>
            </div>
        );
    }
}
 
export default App;


Step to run the application: Open the terminal and type the following command.  

npm start

Output: Open the browser and our project is shown in the URL http://localhost:3000/

adding background image with src/folder

Wrapping Up

Background images are a very basic yet important aspect of web development. In this tutorial, we have covered 5 methods to set a background image for your application with examples in React.

You can easily add or replace the background image of a web application in React using these methods. We have provided completely working codes and you can easily add background images in React with the help of these codes.



Last Updated : 04 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads