CODEWITHSUNDEEP
cssreactjsreact-native
paparoskoni
paparoskoni

Reputation: 1

Adding a backround image for each page in my web-app

i am building a web-app using react js and i am trying to put a backround image which will stay there for every page i visit.My App.js render code is this :

render() { 
  
        return ( 
        <div >   ---> Case 2: <div className="classN"> instead of <div>
            <NavBar user={this.state.user} />
            <main>
                <Switch>
                ...Routes...
                <Route path="/evcharge/api/admin/healthcheck" component={Healthcheck}></Route>
                ... More Routes...
                </Switch>
            </main>
                   ----> Case 1: <img src="/images/backround.png"/> 
        </div>
        );
    }
}

What i have tried after searching online is 2 things.

As shown above in case_1 source the image there which will cause this in main page:

picture1

But if i go to,for example,login this happens:

Picture2

For the second case this is my css code:

.classN{
    background-image: url(./images/backround.png);
  }

In this case the image is like this : Picture3

This both wont get bigger than the Menubar and will also disorder my other elements of the page.

What i would like to achieve is just have the same backround image be displayed in the backround of each page without influencing the other elements of each page,such as the login form.I have been stuck in this for a while and i can't seem to get it to work.Any advide would be helpful.

Thanks in advance.

Upvotes: 0

Views: 45

Answers (1)

Evren
Evren

Reputation: 4410

If you want to use it in every page put that background image directly in body so It will be global

body {
  background-image: url(./images/backround.png);
}

Upvotes: 1

Related Questions