How to Set a Background Image in React

React is a popular front-end JavaScript library for building user interfaces and one of the most useful things when it comes to design is setting a background image.

A background image plays a large part of the design and feel of a website, setting the mood and tone of the site.

In this post, we'll learn how to set a background image in React.

Setting a background image in React

Let's first define a simple React component:

JSX
import React from "react";

const App = () => {
    return (
        <div>
            Hello world
        </div>
    );
};

export default App;

Now, to set a background image here, we'll use the style attribute and set the backgroundImage property to the image we want to use.

JSX
import React from "react";
import background from "./background.png";

const App = () => {
    return (
        <div styles={{ backgroundImage:`url(${background})` }}>
            Hello world
        </div>
    );
};

export default App;

We can just import an image directly from our file system and use it as a background image.

Another way to accomplish this is by using external CSS and setting the background image in the CSS file.

JSX
import React from "react";
import "./App.css";

const App = () => {
    return (
        <div className="app">
            Hello world
        </div>
    );
};

export default App;

CSS
.app {
    background-image: url("./background.png");
}

This is more similar to how it's done using normal HTML and CSS where you just add the styles in CSS and then apply the class to the element.

Either way, you will get the same result.

Conclusion

In this article, we learned how to set a background image in React.

We can do this by using the style attribute and setting the backgroundImage property to the image we want to use or by using external CSS and setting the background image in the CSS file.

Thanks for reading!

• Support Us