How to add a background image into a React Component with JavaScript?

Sometimes, we want to add a background image into a React Component with JavaScript.

In this article, we’ll look at how to add a background image into a React Component with JavaScript.

How to add a background image into a React Component with JavaScript?

To add a background image into a React Component with JavaScript, we can set the backgroundImage CSS property.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <div
      style={{
        width: 300,
        height: 300,
        backgroundImage: `url(https://picsum.photos/300/300)`
      }}
    ></div>
  );
}

We set backgroundImage to the URL of the image we want as the background image.

Therefore, we see the background image displayed.

Conclusion

To add a background image into a React Component with JavaScript, we can set the backgroundImage CSS property.