How to Add a Background Image in React Component?

Sometimes, we want to add a background image in React component.

In this article, we’ll look at how to add a background image in React component.

Add a Background Image in React Component

To add a background image in React component, we can set the backgroundImage property of the object we set as the value of the style prop.

For instance, we write:

import React from "react";

const styles = {
  height: 300,
  backgroundImage: `url(${"https://blog.prezi.com/wp-content/uploads/2019/03/water_ripple-1024x683.jpg"})`
};

export default function App() {
  return <div style={styles}></div>;
}

We have the styles object with the backgroundImage property set to a URL of the background image we want to show.

Then we set the styles prop to the styles object.

Now we see the background image displayed.

Conclusion

To add a background image in React component, we can set the backgroundImage property of the object we set as the value of the style prop.