How To Add Background Image In React App

Sometimes, users demand to ready 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 talk over how to set the groundwork image using inline CSS and external CSS. Nosotros volition also discuss several methods to add the URL of the background image.

Prerequisites: The pre-requisites for this project are:

React

Creating react application

Stride 1: The user tin create a new react projection using the below command.

npx create-react-app testapp

Footstep two: Adjacent, the user needs to move to the test app project binder from the final using the below control.

cd testapp

Project structure: It looks like the below paradigm.

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

Filename: App.js

In App.js, We will add together a style aspect inside the div element and set up the groundwork 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:                            'encompass'              ,            
                            backgroundRepeat:                            'no-repeat'              ,            
                            };            
                            render              (            
                            <div style={myStyle}>            
                            <h1> geeksforgeeks </h1>            
                            </div>            
                            );            
                            }            
              }            
              export                            default              App;            

Output:

Method 2: Using external CSS: In this method, we add together 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 aspect. Also, we import an external CSS file to ready a background epitome 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>            
                            );            
                            }            
              }            
              consign                            default              App;            

Filename: App.css

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

CSS

Output:

Method 3: Using Absolute URL: Users can access the background paradigm straight from the public/ folder via accented URL using the environment variable. Before using this method, Don't forget to add an image inside the public folder otherwise it volition show you a compilation mistake.

Filename: App.js

Hither, 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(${procedure.env.PUBLIC_URL+                            "/paradigm.png"              })`            
                            height:              '100vh'              ,            
                            marginTop:              '-70px'              ,            
                            fontSize:              '50px'              ,            
                            backgroundSize:                            'cover'              ,            
                            backgroundRepeat:                            'no-repeat'              ,            
                            };            
                            render              (            
                            <div style={myStyle} >            
                            <h1>GeeksForGeeks</h1>            
                            </div>            
                            );            
                            }            
              }            
              export                            default              App;            

Output:

Method 4: Using Relative URL: Users tin admission images from the public/ binder or whatsoever kid folder of the public folder via relative path URL. The URL to access the image should be similar <host_name>/prototype.png.

Filename: App.js

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

Javascript

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

Output:

Method five: Add background image from src/ binder If the prototype resides inside the src directory, the user tin can import information technology inside the component filer and set it every bit the groundwork prototype.

Filename: App.js

In this file, nosotros will import the prototype and set it as a groundwork image of the div element.

Javascript

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