How do I put an image as an background in a react app?

Question

I made a simple to-do app using react. I need an image as the background of the site. Where do I put the img tag ? In index.html or App.js? And also where do I put img tag in index.html or App.js?

Does this answer your question? [Setting a backgroundImage With React Inline Styles](https://stackoverflow.com/questions/39195687/setting-a-backgroundimage-with-react-inline-styles) — hisam, Sep 19 '21 at 05:11

Siam Ahnaf · Accepted Answer · 2021-09-19T07:44:37.497

You have not edit index.html. You can put img tag app.js or any other component. But you want to set background image in your app. That's why in your css file you have to add a background image. First of all create the component or structure or edit app.js component.

function App() {
    return (
        <div className="Main">
            <h1>Welcome To React</h1>
        </div>
    )
}
export default App;

then add this to your css file.

.main {
    background-image: url("./public/paper.gif");
}

here give your actual image url.

Thanks.

How do I put an image as an background in a react app?

1 Answers1