Reactjs background image showing only on places with components

I am trying to make a full-screen background image for my website but it does not seem to work. My current code only shows the portion of the background image where components are rendered. I have tried to use background-position: fixed in the App.css file, but the background image becomes full screen but I’m not able to scroll, which is even worse. How do I get this to work?

How my website looks like now:

How my website looks like now.

I tried to set min-width: 100vw and min-height: 100vh but now the top of the webpage is still having the same problem and the webpage becomes scrollable.

Edited webpage:

edited webpage

Below are my files for my App.js and App.css respectively.

class App extends Component {
    componentDidMount() {
        this.props.onAuthCheck();
    }

    render() {
        const auth = this.props.token !== null;
        return (
            <BrowserRouter>
                <div className="App">
                    <Route path="/" exact component={Login} />
                    <Route path="/signup" exact component={SignUp} />
                    <GuardedRoute
                        path="/home"
                        component={Home}
                        auth={auth}
                        exact
                    />
                    <GuardedRoute
                        path="/stocks"
                        component={Stocks}
                        auth={auth}
                        exact
                    />
                    <GuardedRoute
                        path="/News"
                        component={News}
                        auth={auth}
                        exact
                    />
                    <GuardedRoute
                        path="/profile"
                        component={Profile}
                        auth={auth}
                        exact
                    />
                    <GuardedRoute
                        path="/your-analysis"
                        component={YourAnalysis}
                        auth={auth}
                        exact
                    />
                    <GuardedRoute
                        path="/create-analysis"
                        component={CreateAnalysis}
                        auth={auth}
                        exact
                    />
                </div>
            </BrowserRouter>
        );
    }
}

.App {
    background-image: url('./assets/login-bg.jpg');
    min-width: 100%;
    min-height: 100%;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    list-style: none;
}

Answer

Try this:

.App {
    background-image: url('./assets/login-bg.jpg');
    min-width: 100%;
    min-height: 100vh;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    list-style: none;
}

or you can set the background image to the <body>

Advertisement

Answer