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:

full screen image overlay css htmlThe 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>

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!