How do I prevent my background image from becoming smaller than the height of the total page when the browser window is set to a low height?

When I set my browser window to a height of let's say 200px I have to scroll down to be able to see all the text in the left column of my page. I would like my background image to not only cover the viewport height, but to cover the complete page which has to be scrolled through, so that my layout does not break and the text is visible on top of the background image.

I'm doing an online course and it was explained that I can solve this problem by setting a min-height: 100vh. I've set this on .intro, .bg-image and .intro-content. My problem still occurs though.

Thanks in advance.

DEMO :

body {
  margin: 0;
  font-size: 1.125rem;
  font-family: 'Source Sans Pro', sans-serif;
  color: #404040;
  text-align: center;
  display: flex;
}

/* ===============
Typography
=================*/

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  font-size: 3.5rem;
  font-weight: 300;
  color: #fff;
  margin: 4em 0 0;
}

h1 + p {
  color: #f18119;
  font-weight: 900;
  font-size: 1.75rem;
  text-transform: uppercase;
  margin: 0;
}

.top-text {
  color: #f18119;
  font-weight: 900;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-top: 5px solid #f18119; 
  order: -1;
}

h2 {
  font-size: 1.75rem;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0;
}

h2 + p {
  color: #f18119;
  font-weight: 900; 
  text-transform: uppercase;
 
}

.disclaimer-text {
  font-size: 0.625rem;
  letter-spacing: 1px;
}

strong {
  font-weight: 900;
}

/* ===============
Intro
=================*/

.intro {
  width: 50%;
  min-height: 100vh;
  position: relative;
}

.bg-image {
  background-image: url(bbq_spareribs.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgba(51, 44, 44, .7);
  background-blend-mode: overlay;
  filter: blur(3px);
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
}

.intro-content {
  width: 100%;
  max-width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 0 .5em 2em;
  display: flex;
  flex-direction: column;
}

/* ===============
Main content
=================*/

.main-content {
  padding: 2em 1em;
  box-sizing: border-box;
  width: 50%;
  min-height: 100vh;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="Tristan Graaff">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
  <title>BBQ</title>
</head>
<body>
  <div class="intro">
    <div class="bg-image"></div>
    <div class="intro-content">
      <h1>Learn how to make <br> <strong>the best BBQ ribs</strong> <br> in town</h1>
      <p>Join us for this live webinar</p>
      <p class="top-text">Mouthwateringly delicious</p>
    </div>
  </div>
  <div class="main-content">
    <h2>Become a BBQ master! </h2>
    <p>Register Today</p>
    <p>BBQ isn't just standing in front of your grill with it on full blast and hoping for the best. It's an art! 
      One way to speed up the process is to learn from the best. You can do just that by signing up for this free 
      webinar!</p>
    <form>
      <input type="text" value="first name">
      <input type="text" value="email address">
      <input type="submit" value="register">
    </form>
    <p class="disclaimer-text">We'll never share your information without your permission</p>
  </div>
</body>
</html>

Solution

As you already set your container .intro with height: 100vh;. You should just set on .bg-image, min-height: 100%; instead of 100vh;. This way the image will grow with a minimum height of your container.

The problem with putting always min-height:100vh; in a container with the same setting than you cannot add margin as you did because the block wont be contain by container anymore.

For the image to fit correctly with its sibling you should make the css as below. otherwise the intro-content will be too long. I let you check the little change I made.

DEMO:

body {
  margin: 0;
  font-size: 1.125rem;
  font-family: 'Source Sans Pro', sans-serif;
  color: #404040;
  text-align: center;
  display: flex;
}

/* ===============
Typography
=================*/

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  font-size: 3.5rem;
  font-weight: 300;
  color: #fff;
  margin: 4em 0 0;
}

h1 + p {
  color: #f18119;
  font-weight: 900;
  font-size: 1.75rem;
  text-transform: uppercase;
  margin: 0;
}

.top-text {
  color: #f18119;
  font-weight: 900;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-top: 5px solid #f18119; 
  order: -1;
}

h2 {
  font-size: 1.75rem;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0;
}

h2 + p {
  color: #f18119;
  font-weight: 900; 
  text-transform: uppercase;
 
}

.disclaimer-text {
  font-size: 0.625rem;
  letter-spacing: 1px;
}

strong {
  font-weight: 900;
}

/* ===============
Intro
=================*/

.intro {
  width: 50%;
  min-height: 100vh;
  position: relative;
}

.bg-image {
  background-image: url(https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_1280.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgba(51, 44, 44, .7);
  background-blend-mode: overlay;
  filter: blur(3px);
  width: 100%;
  max-width: 100%;
  /*min-height: 100vh;*/
  min-height: 100%;         /* ADDED */
  position:absolute;        /* ADDED */
  z-index:-1;               /* ADDED */
}

.intro-content {
  width: 100%;
  max-width: 100%;
  /*position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);*/
  z-index: 2;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 0 .5em 2em;
  display: flex;
  flex-direction: column;
}

/* ===============
Main content
=================*/

.main-content {
  padding: 2em 1em;
  box-sizing: border-box;
  width: 50%;
  min-height: 100vh;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="Tristan Graaff">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
  <title>BBQ</title>
</head>
<body>
  <div class="intro">
    <div class="bg-image"></div>
    <div class="intro-content">
      <h1>Learn how to make <br> <strong>the best BBQ ribs</strong> <br> in town</h1>
      <p>Join us for this live webinar</p>
      <p class="top-text">Mouthwateringly delicious</p>
    </div>
  </div>
  <div class="main-content">
    <h2>Become a BBQ master! </h2>
    <p>Register Today</p>
    <p>BBQ isn't just standing in front of your grill with it on full blast and hoping for the best. It's an art! 
      One way to speed up the process is to learn from the best. You can do just that by signing up for this free 
      webinar!</p>
    <form>
      <input type="text" value="first name">
      <input type="text" value="email address">
      <input type="submit" value="register">
    </form>
    <p class="disclaimer-text">We'll never share your information without your permission</p>
  </div>
</body>
</html>