<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>
  <footer class="footer">
    <!-- above the fold for hero image -->
    <!-- if you want the footer below the fold then move the html for it 0outside of the wrapper and then changhe the grid template i.e.   grid-template-rows: auto 1fr  -->
    <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>
</div>

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 auto;
  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 height 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;
}