How to use External CSS to set Background Image in React In ReactJS
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 */ .w3wiki { background-image : url ( "https://media.w3wiki.org/wp-content/uploads/rk.png" ); background- size : "cover" ; height : 100 vh; 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= "w3wiki" > <h1>w3wiki</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/
How to set background images in ReactJS
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.