There are four ways to set a backgroundImage
style property using React's inline CSS.
This tutorial will show you all four methods, with code samples for each.
Here's an Interactive Scrim of Setting a Background Image with React
How to Set a Background Image in React Using an External URL
If your image is located somewhere online, you can set the background image of your element by placing the URL like this:
function App() {
return (
<div style={{
backgroundImage: `url("https://via.placeholder.com/500")`
}}>
Hello World
</div>
);
}
The code above will render a single <div>
element with the style background-image: url(https://via.placeholder.com/500)
applied into it.
How to Set a Background Image in React From Your /src Folder
If you bootstrap your application using Create React App and have your image inside the src/
folder, you can import
the image first and then place it as the background of your element:
import React from "react";
import background from "./img/placeholder.png";
function App() {
return (
<div style={{ backgroundImage: `url(${background})` }}>
Hello World
</div>
);
}
export default App;
When you run the npm start
command, React will show a "Failed to Compile" error and stop the build when the image is not found:

This way, you won't show any broken image links on your web app. In the code above, the value of backgroundImage
is set using a template string, which allows you to embed JavaScript expressions.
How to Set a Background Image in React Using the Relative URL Method
The public/
folder in Create React App can be used to add static assets into your React application. Any files you put inside the folder will be accessible online.
If you put an image.png
file inside the public/
folder, you can access it at <your host address>/image.png
. When running React in your local computer, the image should be at http://localhost:3000/image.png
.
You can then assign the URL relative to your host address to set the background image. Here's an example:
<div style={{ backgroundImage: "url(/image.png)" }}>
Hello World
</div>
By setting the URL path to /image.png
like the example above, the browser will look for the background image at <your host address>/image.png
.
You can also create another folder inside public/
if you want to organize your images into folders. For example:

Don't forget to adjust the backgroundImage
value to url(/img/image.png)
if you decide to create the folder.
How to Set a Background Image in React Using the Absolute URL Method
You can also include the absolute URL by using Create React App's PUBLIC_URL
environment variable like this:
<div style={{
backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})`
}}>
Hello World
</div>
When you run this on your local computer, React scripts will handle the value of the PUBLIC_URL
value. When you run it locally, it will look like a relative URL instead of absolute URL:

The absolute URL will only be seen when you deploy React into production application later.
How to Set a Background Image with Additional Properties
If you want to customize the background image further, you can do so by adding additional properties after the backgroundImage
. Here's an example:
<div style={{
backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})`,
backgroundRepeat: 'no-repeat',
width:'250px'
}}>
Hello World
</div>
The properties set above will add background-repeat: no-repeat
and width: 250px
together with the background-image
style to the <div>
element.
Thank you for reading, and I hope you found this article useful. If you have any questions, you can find me on Twitter. I will share some short developer tips from time to time as well. 🙂