Full screen image background with text overlay

How to easily get a responsive full screen image background with text overlay in HTML such as this:

The method shown here uses Bootstrap, you could however do it vanilla CSS with some tweaking.

The image was taken from here and you can view a working CodePen here.

The HTML code:

<div class='image-background'>
  <div class='container h-100'>
    <div class='row h-100 align-items-center'>
      <div class='col-12 text-center'>
        <h1 class='display-2'>This is LA</h1>
        <p class='lead'>Image taken from /r/wallpapers</p>
      </div>
    </div>
  </div>
</div>

CSS code:

body {
  color: white;
}
.image-background {
  height: 100vh;
  min-height: 500px;
  background-image: url("https://i.redd.it/9qgaiif7gum31.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Thats it!