How To Set Background Image In React JS

React set background image; In this tutorial, you will learn how to set/add background image in react js apps using external, internal, src, absolute url, and additional properties.

You must have also noticed that many websites have images in the background. And you want to set background image in your react js app also. So in this tutorial, you will learn 5 such ways. With which you can set the image in the background in react app.

Now in this react set background image tutorial will provide you step by step guide on how to set background image in react js app.

How To Set Background Image In React

There are five ways to set a background image in React apps:

1. Set a Background Image in React Using an External URL
2. Set a Background Image in React From Your /src Folder
3. Set a Background Image in React Using the Relative URL Method
4. Set a Background Image in React Using the Absolute URL Method
5. Set a Background Image with Additional Properties

1 – Set a Background Image in React Using an External URL

If your 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

If your react app 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

Using the following code; 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

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>

Conclusion

React set background image example; In this tutorial, you have learned 5 ways to set background image in react js apps.

Recommended React JS Posts