# Background Images

**URL:** https://forum.kirupa.com/t/background-images/645211
**Category:** Uncategorized
**Created:** [December 5, 2020, 5:05pm UTC](https://forum.kirupa.com/t/background-images/645211 "2020-12-05T17:05:42Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![StraightUpRader](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/straightuprader/32/13005_2.png) [@StraightUpRader](https://forum.kirupa.com/u/StraightUpRader)
#### Post date: [December 5, 2020, 5:05pm UTC](https://forum.kirupa.com/t/background-images/645211/1 "2020-12-05T17:05:42Z")

</div>

I’m having trouble figuring out how to set up a repeating background image for my react app. I want to understand how to easily set this background image, then have a body wrapper inside that like this:

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/0/0b3e1fd05b7dd46bcd3f260cf71eecba6fbcb4a0.jpeg)

A question off of that - how do I set a background image in the CSS when importing it with webpack in my index.js file?

On top of that, how should I set background images for lower components just like this webpage?

With your SPA example–

```
  class Main extends Component {
    render() {
        return (
            <HashRouter>
                <div className="page_padding"></div>
                <ul className="header">
                    <li><NavLink to="/">Home</NavLink></li>
                    <li><NavLink to="/About">About</NavLink></li>
                </ul>
                <div className="content">
                    <Route exact path="/" component={Home} />
                    <Route path="/About" component={About} />
                </div>
            </HashRouter>
        );
    }
}

```

Where should I be adding a style to change the background of the Main component?

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [December 6, 2020, 1:14am UTC](https://forum.kirupa.com/t/background-images/645211/2 "2020-12-06T01:14:32Z")

</div>

You’ll want to add a background to an entire page on the `body` element. What is the HTML file that is the entry point for your app? Is there a CSS file associated with it named something like **index.css**?