title: How to make banner fullscreen? And adapt to the browser size
body: <p>Essentially, I want to put a big banner on my website that would fill the browser as soon as you landed on the page regardless of the browser window size. If the browser window is resized the banner should be able to adapt and still be able to fill the browser window. The banner’s aspect ratio would remain the same, no stretching or shrinking the image as you resize the browser window.</p>
  
  <p>I am new to web development, I just wanted to know what tools I will need to achieve this? And any initial code will be highly appreciated. Thanks</p>
  
  <p>Something very similar to Spotify’s website banner. <a href="https://www.spotify.com/ca-en/" rel="nofollow">https://www.spotify.com/ca-en/</a></p>
  
  <p><strong><em>edited</em></strong>
  this is what I have for now, its not much</p>
  
  <pre><code>#header_image_div{
      width: 100%;
      position: absolute;
      top: 0px;
      z-index: -1;
  }
  #header_image{
      width: 100%;
  }
  </code></pre>