How to set background images in ReactJS ?

22 October 2023

Sometimes, users need to set background images while developing the react app. In this article, we are going to discuss all methods to set background images in react app.

We will discuss how to set the background image using inline CSS and external CSS. We will also discuss several methods to add the URL of the background image.

Prerequisites: The pre-requisites for this project are:

React

Creating react application

Step 1: The user can create a new react project using the below command.

npx create-react-app testapp

Step 2: Next, the user needs to move to the test app project folder from the terminal using the below command.

cd testapp

Project structure: It looks like the below image.

Method 1: Using inline CSS: In this method, we add the style attribute inside the element itself.

Filename: App.js

In App.js, We will add a style attribute inside the div element and set the background image for a div element using inline CSS.

Javascript

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

Output:

Method 2: Using external CSS: In this method, we add an external CSS file to set a background image for the react component.

Filename: App.js

In App.js, we will add a simple div element with the className attribute. Also, we import an external CSS file to set a background image for the div element.

Javascript

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

Filename: App.css

In App.css, we will add a code style react component added inside the App.js file. We will access the div element from the App.js file using the className attribute and set the background image.

CSS

.GeeksForGeeks {
  background-image: 
  url(
"https://media.neveropen.co.za/wp-content/uploads/rk.png");
  background-size: "cover";
  height: 100vh;
  margin-top: -70px;
  font-size:50px;
  background-repeat:no-repeat; 
}

Output:

Method 3: Using Absolute URL: 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.

Filename: App.js

Here, we will add code to set background images using inline CSS and environment variables.

Javascript

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;

Output:

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

Filename: App.js

In this file, we set a background image for the div element using the relative path of the image.

Javascript

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;

Output:

Method 5: Add background image from src/ folder If the image resides inside the src directory, the user can import it inside the component filer and set it as the background image.

Filename: App.js

In this file, we will import the image and set it as a background image of the div element.

Javascript

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;

Steps to run react application: You can run the react application using the below command.

npm start

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!

Javascript

Javascript

CSS

Javascript

Javascript

Javascript

LEAVE A REPLY