title: Background Picture on a Responsive Login doesn't fit when the screen size changes
body: <p>I created a Login form using HTML, CSS and the background image has white space below the image.</p>
  <p>However, when I change the size of the screen, it has white space below the image.</p>
  <p>If you look at this picture, this is how it should look like:</p>
  <p>Also here is the script for the background image as well as the site wrapping:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import "https://use.fontawesome.com/releases/v5.5.0/css/all.css";
  
  html, body {min-height: 100%;}
  body {
      font-family: sans-serif;    
    background-image: url(assets/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
      overflow: hidden;
  }
  
  .container {
      width: 380px;
      margin:7% auto;
      border-radius: 25px;
      background-color: rgba(0,0,0,0.1);
      box-shadow: 0 0 17px #333;
  }
  
  .header {
      text-align: center;
      padding-top: 75px;
  }
  
  .header h1 {
      color: #333;
      font-size: 45px;
      margin-bottom: 80px;
  }
  
  .main {
      text-align: center;
  }
  
  .main input, button {
      width: 300px;
      height: 40px;
      border:none;
      outline: none;
      padding-left: 40px;
      box-sizing: border-box;
      font-size: 15px;
      color: #333;
      margin-bottom: 40px;
  }
  
  .main button {
      padding-left: 0;
      background-color: #83acf1;
      letter-spacing: 1px;
      font-weight: bold;
      margin-bottom: 70px;
  }
  
  .main button:hover {
      box-shadow: 2px 2px 5px #555;
      background-color: #7799d4;
  }
  .main input:hover {
      box-shadow: 2px 2px 5px #555;
      background-color: #ddd;
  }
  
  .main span {
      position: relative;
  }
  
  .main i {
      position: absolute;
      left: 15px;
      color: #333;
      font-size: 16px;
      top: 2px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      
      &lt;link rel="stylesheet" type="text/css" href="assets/fontawesome/css/all.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="assets/style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;div class="container"&gt;
      &lt;div class="header"&gt;
          &lt;h1&gt;&lt;b&gt;login&lt;/b&gt;&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="main"&gt;
          &lt;form #loginForm="ngForm" (ngSubmit)="login(loginForm)"&gt;
  
      &lt;div class="row" *ngIf="authError"&gt;
                  &lt;div class="col-12 alert alert-danger"&gt;{{ authError?.message }}&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;span&gt;
                  &lt;i class="fas fa-user"&gt;&lt;/i&gt;
                  &lt;input  ngModel #email="ngModel" placeholder="Email" name="email" type="email"&gt;
              &lt;/span&gt;&lt;br&gt;
              &lt;span&gt;
                  &lt;i class="fas fa-lock"&gt;&lt;/i&gt;
                  &lt;input  ngModel #password="ngModel" placeholder="Password" name="password" type="password"&gt;
              &lt;/span&gt;&lt;br&gt;
  
                  &lt;button type="submit"&gt;login&lt;/button&gt;
  
           &lt;a  style=" text-align:center; display:block;" href="/register"&gt;Click here to register&lt;/a&gt;
  
          &lt;/form&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/1pRL3.png" rel="nofollow noreferrer">This is my screenshot</a></p>