Open In App

How to set background images in ReactJS

Last Updated : 04 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
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.



Similar Reads

How to set multiple background images using CSS?
The multiple background images for an element can be put in the HTML page using CSS. Use CSS background property to add multiple background images for an element in any pattern and use other CSS property to set the height and width of the images. The used background property are listed below: background-image: url(), url(), ...; This property is us
2 min read
Bootstrap 5 Images Aligning Images
Bootstrap 5 Aligning Images are used to set the alignment to the image. We will use float or text alignment classes to set the alignment of images. We can use the .mx-auto margin utility class to center the block-level images. Aligning Images used Classes: .float-start: This class is used to set the position of an element to left..float-end: This c
3 min read
Bootstrap 5 Images Responsive images
Bootstrap 5 Responsive images are used to resize the images according to their parent element and screen sizes. It means, the size of the image should not overflow its parent element and will grow and shrink according to the change in the size of its parent without losing its aspect ratio. Responsive images used Class: .img-fluid: This class is use
2 min read
How to smoothly transition CSS background images using jQuery?
In this article, we will learn to implement a smooth transition of background images using jQuery and CSS. Approach: First, we add a transparent background image using the background-image property in CSS in the style tag. background-image: url(white.jpg); For the transition background image, we use the transition property in CSS and add a transiti
2 min read
How to Change Background Images on Scroll using CSS?
Background images are crucial in web development, significantly enhancing the user experience. Using background images on a webpage can effectively showcase a brand or convey specific messages. Here, we will explore how to change background images on scroll using CSS. ApproachThe HTML includes a span element and three div elements with the class .b
2 min read
HTML Background Images
HTML background images are graphics applied to the background of HTML elements, often used in webpage design for aesthetic or branding purposes. They're set using CSS background-image property, allowing for single or repeating images, gradients, or patterns to enhance visual appeal. Understanding HTML Background ImagesHTML Background Images allows
3 min read
Difference between background and background-color
Background Property The background property in CSS is very commonly used and contains many variants. The background property consists of all the following properties:background-colorbackground-imagebackground-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachmentExample: C/C++ Code &amp;lt;style&amp;gt; h1 { b
1 min read
ReactJS MDBootstrap Images Styles
MDBootstrap is a Material Design and bootstrap-based react UI library that is used to make good-looking webpages with its seamless and easy-to-use component. In this article, we will know how to use Images Styles in ReactJS MDBootstrap. Images Styles is used to add how to add images in the element. Syntax: &lt;img src="link" /&gt;Creating React App
3 min read
How to crop images in ReactJS ?
Image cropping is a common requirement in web applications, especially when dealing with user-generated content, photo editing, or image manipulation. ReactJS, being a popular JavaScript library for building user interfaces, provides various techniques and libraries that can be used to implement image cropping functionality. In this article, we'll
3 min read
How to put an image as background under multiple components in ReactJS with React Routing?
We can make a parent component and use that parent component to wrap the child component so that the parent component appears as an image overlay above the child component. Syntax: &lt;div style={{ backgroundImage: `url(${'/background.jpg'})`}}&gt; {props.children} &lt;/div&gt; Creating React Application: Step 1: Create a React application using th
2 min read