How To Set Background Image In React

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:

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

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.

Recommended React Tutorials