Skip to content
Related Articles

Related Articles

How to set background images in ReactJS ?

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 31 Oct, 2021

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:

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: 
        height:'100vh',
        marginTop:'-70px',
        fontSize:'50px',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
    };
    return (
      <div style={myStyle}>
        <h1> geeksforgeeks </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(
  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:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!