I am trying to add a background image to my react app project. I would like to display the image in all pages but for every page the image is not displayed in full screen there is a blank area. Here is the css for the App.js

.background-image {
  background-image: url(./assets/space-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;

}

and my App.js is like :

render() {
    return (
        <Router>
          <Container className="p-0 background-image" fluid={true}>
            <Navbar bg="transparent" expand="lg">
              <Navbar.Brand style={{color: 'white'}} >Schoninger Jimmy</Navbar.Brand>
              <Navbar.Toggle className="border-0" aria-controls="navbar-toggle"/>
              <Navbar.Collapse id="navbar-toggle">
                <Nav className="ml-auto">
                  <Link className="nav-link" to="/"  style={{color: 'white'}} >Home</Link>
                  <Link className="nav-link" to="/about" style={{color: 'white'}}>About</Link>
                  <Link className="nav-link" to="/contact" style={{color: 'white'}}>Contact</Link>
                </Nav>
              </Navbar.Collapse>
            </Navbar>

            <Route path="/" exact render={() => <HomePage title={this.state.home.title} />} />
            <Route path="/about"  render={() => <AboutPage title={this.state.home.title} />} />
            <Route path="/contact"  render={() => <ContactPage title={this.state.home.title} />} />
          </Container>
        </Router>

    );
  }

enter image description here

EDIT: i added these to the css

.background-image {
  background-image: url(./assets/space-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  height: 100vh; 
  width: 100vw;
  background-position: center; 

}

and now the background is still weird

I am trying to add a background image to my react app project. I would like to display the image in all pages but for every page the image is not displayed in full screen there is a blank area. Here is the css for the App.js

.background-image {
  background-image: url(./assets/space-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;

}

and my App.js is like :

render() {
    return (
        <Router>
          <Container className="p-0 background-image" fluid={true}>
            <Navbar bg="transparent" expand="lg">
              <Navbar.Brand style={{color: 'white'}} >Schoninger Jimmy</Navbar.Brand>
              <Navbar.Toggle className="border-0" aria-controls="navbar-toggle"/>
              <Navbar.Collapse id="navbar-toggle">
                <Nav className="ml-auto">
                  <Link className="nav-link" to="/"  style={{color: 'white'}} >Home</Link>
                  <Link className="nav-link" to="/about" style={{color: 'white'}}>About</Link>
                  <Link className="nav-link" to="/contact" style={{color: 'white'}}>Contact</Link>
                </Nav>
              </Navbar.Collapse>
            </Navbar>

            <Route path="/" exact render={() => <HomePage title={this.state.home.title} />} />
            <Route path="/about"  render={() => <AboutPage title={this.state.home.title} />} />
            <Route path="/contact"  render={() => <ContactPage title={this.state.home.title} />} />
          </Container>
        </Router>

    );
  }

enter image description here

EDIT: i added these to the css

.background-image {
  background-image: url(./assets/space-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  height: 100vh; 
  width: 100vw;
  background-position: center; 

}

and now the background is still weird

• javascript
• html
• css
• reactjs
• react-bootstrap

• are html and body 100% height? you could make the div position:absolute also. – Rmaxx Commented Apr 17, 2020 at 15:14
• which div ? the container? it is a react_bootstrap ponent and i want them mobile friendly. – Jimjim Commented Apr 17, 2020 at 15:19
• i think you are missing positions in your code also try vw vh background-image { background-image: url(./assets/space-bg.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; height: 100vg; width: 100vw: position: absolute; – arslan Commented Apr 17, 2020 at 15:40
• 1 @arslan thank you i have tried to put these missing attributes to the container css and it showed another problem. Look the edit in the question – Jimjim Commented Apr 17, 2020 at 15:57
• 1 @arslan if the screen has a scroll down, the background doesnt adapt its size – Jimjim Commented Apr 17, 2020 at 16:02

1 Answer 1

I think this CSS style code can help you:

.background-image {
    background-image: url(./assets/space-bg.jpg);
    background-size: cover;
    background-position: top;
    min-height: 100%;
    height: 100vh;
    position: relative;
}