<html>
  <body>
    <div class="page">
      <div class="header">
       <img class="logo" src="https://www.tonycre8.co.uk/static/logo-684400cc71e2ad797ef1fe3fba62ecee.png"/>
      </div>
      <div class="body">
        <div class="hero">
          <div class="overlay">
            <h1>Some header stuff</h1>
            <img src="https://images.unsplash.com/photo-1513757378314-e46255f6ed16?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80"/>
          </div>
        </div>
        <div>
          <p>Here's some other content huehue</p>
        </div>
      </div>
      <div class="footer">
        <p>Bottom text<p>
      </div>
    </div>
  </body>
</html>
body {
  margin: 0
}
.page {
  display: flex;
  flex-flow: column wrap;
}
/* Header stuffs */
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
  width: 100%;
  background: #f436;
}
img.logo {
  height: 100px;
  width: 100px;
}
/* Body */
.body {
  background: #484859;
  color: #fff;
  height: 100%;
}
.overlay {
  width: 100%;
  height: auto;
  display: flex;
}
.overlay h1 {
  display: flex;
  justify-content: center;
  align-self: center;
  font-size: 30px;
  height: 70px;
  width: 100%;
  background: rgba(255,255,255,.7);
  text-align: center;
  color: #363636;
  position: absolute;
  margin: 0;
}
.overlay img {
  width: 100%;
  height: auto;
}

.footer {
  height: 100px;
  width: 100%;
  background: black;
  color: #fff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.