title: Background image with react js - not displaying full screen
body: <p>I'm used to react native and trying my hand at reactjs, however I'm getting really frustrated with myself as I understand a lot of how react works from using react native but I can't style my components properly as I'm not used to css.</p>
  
  <p>I'm using the ant design UI framework to help me build a small web application, and as of now I have my nav bar along the top of the app but want to set an image below that takes up 100% of the screen and have the height auto set to the aspect ratio.</p>
  
  <p>I'm currently trying this but it doesn't work.</p>
  
  <pre><code>&lt;div className="background"&gt;
  &lt;/div&gt;
  
  //In App.css
  
  .background {
    background-image: url('./assets/main-image.jpg');
    background-size: 'contain';
    width: 100%;
    height: auto;
  }
  </code></pre>
  
  <p>I've tried the above but and a few other methods but nothing is working. It appears that the height is dependent upon whatever the content inside the div is. For example, if I place a h1 tag inside the div then I can see the image but only a few pixels in height.</p>
  
  <p>My image is 4000px in width and is landscape. I just want to be able to dynamically display the image depending on screen resolution.</p>
  
  <p>Can someone point me in the right direction?</p>
  
  <p>Thanks</p>
  
  <p>Edit: I've now set my css background class to this and it's nearly there.</p>
  
  <pre><code>  background-image: url('./assets/main-image.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
  </code></pre>
  
  <p>The only issue is now I'm left with a decent size of padding below the image due to it rendering the full height of my view port</p>