<div class="wrapper">
  <header class="header">
    <!-- nav or header here -->
    <h1>Header or nav</h1>
  </header>
  <main class="content hero">
    <!-- hero image here -->
    <div class="hero-text">
      <h2>Hero Text</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias voluptates tenetur dolorem animi ex praesentium qui ducimus autem? Nisi, iusto esse ex quae nihil tempore temporibus eum, aut natus molestias deleniti omnis optio. Minus laborum temporibus eum, reprehenderit, optio consectetur quo ex ad beatae corporis recusandae!</p>

    </div>
  </main>
</div>
<footer class="footer">
  <!-- below the fold for hero image -->
  <!-- if you want the footer to show at bottom of the viewport initially then move the footer element inside the wrapper and add another row to the grid-template i.e.   grid-template-rows: auto 1fr auto; -->
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum eveniet excepturi,
    ipsum ipsa maxime recusandae dolore molestias alias dolorem facere. Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum eveniet excepturi,
    ipsum ipsa maxime recusandae dolore molestias alias dolorem facere.</p>
</footer>

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  padding: 0;
  margin: 0;
}

.wrapper {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  grid-template-rows: auto 1fr;
  font-size: 1rem;
}
.header {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  position: sticky;
  top: 0;
  /* min-height:20vh; do this if an initial heright is needed*/
}
h1,
h2 {
  margin: 0;
  text-align: center;
  font-size: 2rem;
}
.content {
  background-color: rgb(116, 206, 233);
}
.hero {
  background: url(https://picsum.photos/id/1020/2000/1000) no-repeat 50%;
  background-size: cover;
  display: flex;
}
.hero-text {
  padding: 2rem;
  font-size: 2rem;
  max-width: 980px;
  margin: auto;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.footer {
  background-color: #000;
  color: #fff;
  border-top: 2px solid red;
}
.header,
.footer,
.content {
  padding: 1rem 2rem;
}

@media screen and (max-width: 768px) {
  h1,
  h2 {
    margin: 0;
    text-align: center;
    font-size: 1rem;
  }
  .header,
  .footer,
  .content {
    padding: 0.5rem;
  }
  .hero-text {
  padding: .5rem;
  font-size: 1rem;
}