If you struggle to set a background image in your applications or websites in React, this article is for you. In this ITtutoria article, we will provide you with multiple solutions for the question How to setting a background image with inline Styles in React?

How to Set a background image with inline Styles in React?

When developing an app or a website, you must add a background image at some point. Then how can you set one for your applications or websites? There are three possible solutions for you, get on reading, and we will explain those by one.

METHOD 1: Using the Relative URL Method

To learn React, there is a comfortable environment called Create React App, which is the best way to build a single-page application. Create React App requires Node>=14.0.0 and npm>=5.6 installed on your machine. To start a new project, run the command below.

npx create-react-app my-app
cd my-app
npm start

Suppose your image file name is image.png. You will need to put the image.png file inside the public/ folder, which can use to add static assets to your React application. Now you can access the image at <your host address>/image.png. When you run React, the image should be at http://localhost:3000/image.png.

To set the background image, you can assign the URL relative to the host address. 

<div style={{ backgroundImage: "url(/image.png)" }}>
  How to setting a background image with inline Styles in React
</div>

When the URL path is set to /image.png, like in the example above, the browser will search for the background image at <your host address>/image.png.

METHOD 2: Using the Absolute URL Method

After creating a new project, add the absolute URL by using the PUBLIC URL environment variable in Create React App, as seen below.

<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})` 
}}>
  How to setting a background image with inline Styles in React
</div>

The result may look like you are using the relative URL because the React script will handle the value of the PUBLIC_URL. 

<div id="root">
<div style="background-image: url"("/image.png");">How to setting a background image with inline Styles in React</div>
</div>

The absolute URL will only appear when you deploy React into the application.

METHOD 3: Using an External URL

For this method, you will use an image you found on the Internet. Your image is located online, so you just need to set the element’s background image by replacing the image URL.

function App() {
  return (
    <div style={{ 
      backgroundImage: `url("https://via.placeholder.com/500")` 
    }}>
      How to setting a background image with inline Styles in React
    </div>
  );
}

The code will only render a single <div> element with the style background-image: url (https://via.placeholder.com/500) applied to it.

How To Customize The Background Image

After finished setting your background image, you may want to add some extra properties to it. Here is the structure you have to follow.

<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})`,
  backgroundRepeat: 'no-repeat',
  width:'250px' 
}}>
  How to setting a background image with inline Styles in React
</div>

The properties set will add background-repeat: no-repeat and width: 250px together with the background-image style to the <div> element.

Conclusion

Setting a background image with inline Styles in React will be an issue when you develop an application or a website. We believe with the solutions we give you above, you will be able to set a background image without trouble. Please leave a comment below if you have any questions. Thank you!

Read more:

→ How To Make The Background Color Fade In Html?