How to set a background Image With React Inline Styles ?
Last Updated :
22 Dec, 2020
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:
Share your thoughts in the comments
Please Login to comment...