Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Filename: App.js

Javascript






import React from "react";
  
const App = () => {
  return (
    <div style={{
      backgroundImage: 'url("https://media.geeksforgeeks.org/'+
      '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: 




My Personal Notes arrow_drop_up
Recommended Articles
Page :