title: How to display an image in full screen background using reactJS and css?
body: <p>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</p>
  
  <pre><code>.background-image {
    background-image: url(./assets/space-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
  
  }
  
  
  </code></pre>
  
  <p>and my App.js is like :</p>
  
  <pre><code>render() {
      return (
          &lt;Router&gt;
            &lt;Container className="p-0 background-image" fluid={true}&gt;
              &lt;Navbar bg="transparent" expand="lg"&gt;
                &lt;Navbar.Brand style={{color: 'white'}} &gt;Schoninger Jimmy&lt;/Navbar.Brand&gt;
                &lt;Navbar.Toggle className="border-0" aria-controls="navbar-toggle"/&gt;
                &lt;Navbar.Collapse id="navbar-toggle"&gt;
                  &lt;Nav className="ml-auto"&gt;
                    &lt;Link className="nav-link" to="/"  style={{color: 'white'}} &gt;Home&lt;/Link&gt;
                    &lt;Link className="nav-link" to="/about" style={{color: 'white'}}&gt;About&lt;/Link&gt;
                    &lt;Link className="nav-link" to="/contact" style={{color: 'white'}}&gt;Contact&lt;/Link&gt;
                  &lt;/Nav&gt;
                &lt;/Navbar.Collapse&gt;
              &lt;/Navbar&gt;
  
              &lt;Route path="/" exact render={() =&gt; &lt;HomePage title={this.state.home.title} /&gt;} /&gt;
              &lt;Route path="/about"  render={() =&gt; &lt;AboutPage title={this.state.home.title} /&gt;} /&gt;
              &lt;Route path="/contact"  render={() =&gt; &lt;ContactPage title={this.state.home.title} /&gt;} /&gt;
            &lt;/Container&gt;
          &lt;/Router&gt;
  
      );
    }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/PYSFh.jpg" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>EDIT: 
  i added these to the css</p>
  
  <pre><code>.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; 
  
  }
  </code></pre>
  
  <p>and now the background is still weird</p>
  
  <p><a href="https://i.stack.imgur.com/5esq1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5esq1.jpg" alt="enter image description here"></a></p>