React set background image example; In this tutorial, i will provide you complete 5 solution on how to set background image in react js apps.
The background-image property sets one or more background images for an element. By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally. Tip: Always set a background-color to be used if the image is unavailable.
React set background image tutorial; you will learn 5 method of how to set background image in react js app.
React Set Background Image Examples
Let’s see the following examples for set background image in react js apps; is as follows:
- Set a Background Image in React Using an External URL
- Set a Background Image in React From Your /src Folder
- Set a Background Image in React Using the Relative URL Method
- Set a Background Image in React Using the Absolute URL Method
- Set a Background Image with Additional Properties
1 – Set a Background Image in React Using an External URL
Image is located any clould plateform or any other server; So 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> ); }
2 – Set a Background Image in React From Your /src Folder
Image has been inside the src/
directory; so 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;
3- 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>
4 – Set a Background Image in React Using the Absolute URL Method
Image has been absolute path, 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>
5 – Set a Background Image with Additional Properties
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>
Conclusion
React set background image example; In this tutorial, you have learned 5 ways to set background image in react js apps.