title: React: App height only half of page after setting HTML, Body and App to 100% height
body: <p>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.</p>
  
  <p>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.  </p>
  
  <p>App.js file</p>
  
  <pre><code>class App extends Component {
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;Navigation /&gt;
          &lt;Logo /&gt;
          &lt;Rank /&gt;
          &lt;ImageLinkForm /&gt;
          &lt;FaceRecognition /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>App.css file</p>
  
  <pre class="lang-css prettyprint-override"><code>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;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>I want my background photo to be the only thing manipulated, not the entire body of my site.</p>