React Set Background Image Example

React set background image example; In this tutorial, you will learn how to set background image in react js apps.

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 toset 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 thesrc/ directory; so you canimport 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

Thepublic/ 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 animage.png file inside thepublic/ folder, you can access it at<your host address>/image.png. When running React in your local computer, the image should be athttp://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'sPUBLIC_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 thebackgroundImage. 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

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

View all posts by Admin