React: App height only half of page after setting HTML, Body and App to 100% height

Question

My App's background photo goes only to half of the page. It seems to be limited to the length of the components, even though I had attempted to separate that with my code.

I have already set HTML, Body, and the App component to a height of 100% in my App.css file. But the result is my app background taking up only half of the screen.

App.js file

class App extends Component {
  render() {
    return (
      <div className="App">
        <Navigation />
        <Logo />
        <Rank />
        <ImageLinkForm />
        <FaceRecognition />
      </div>
    );
  }
}

App.css file

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.App {
  background: url('/assets/background.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 100%;
}

button, link {
  cursor: pointer;
}

I had originally set the .App portion of my css file to body so that the App's background would cover the page, but I would like to be able to further modify the background image alone, which I can't do if the image is within the body.

I want my background photo to be the only thing manipulated, not the entire body of my site.

Answer 1

Ah your are right! It's the #root ! I have also added overflow: hidden; to .App for collapsing the margins.

#root {
  height: 100%;
}

Look at the CodeSandbox preview :

Answer 2

Try with height: 100vh; instead of height: 100%; . This will force your elements to adapt to the full ViewHeight