A React project is created using create-react-app command and the task is to set a background image using react inline styles. There are three approaches that are discussed below:
Approach 1: Set background image using external URL: If the image located somewhere online, then the background image of the element can be set like this:
Filename: App.js
Javascript
import React from "react"; Â Â const App = () => { Â Â return ( Â Â Â Â <div style={{ Â Â Â Â Â Â 'wp-content/uploads/20201221222410/download3.png")', Â Â Â Â Â Â height: "300px", backgroundRepeat: "no-repeat"Â Â Â Â }}> Â Â Â Â Â Â <h1> HELLO </h1> Â Â Â Â </div> Â Â ); }; Â Â export default App; |
Approach 2: Set background image using the Absolute URL method: If you put your image, for example, background.jpg file inside the public/ folder, you can include the absolute URL by using the PUBLIC_URL environment variable.
Filename: App.js
Javascript
import React from "react"; Â Â const App = () => { Â Â return ( Â Â Â Â <div style={{ Â Â Â Â Â Â backgroundImage: `url(${process.env.PUBLIC_URL Â Â Â Â Â Â Â Â Â Â + "/background.jpg"})`, Â Â Â Â Â Â height: "300px", backgroundRepeat: "no-repeat"Â Â Â Â }} > Â Â Â Â Â Â <h1>Hello</h1> Â Â Â Â </div> Â Â ); }; Â Â export default App; |
Approach 3: Set background image using the Relative URL method: If you put your image, for example, background.jpg file inside the public/ folder in the react app, you can access it at <your host address>/background.jpg.Â
You can then assign the URL relative to your host address to set the background image like this:
Filename: App.js
Javascript
import React from "react"; Â Â const App = () => { Â Â return ( Â Â Â Â <div style={{ Â Â Â Â Â Â backgroundImage: "url(/background.jpg)", Â Â Â Â Â Â height: "300px", Â Â Â Â Â Â backgroundRepeat: "no-repeat"Â Â Â Â }} > Â Â Â Â Â Â <h1>Hello</h1> Â Â Â Â </div> Â Â ); }; Â Â export default App; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output:Â
