Working Example: https://codepen.io/reggs/pen/oNvWNzM

HTML

<div class="slider" style="background-image: url(https://www.fillmurray.com/640/360);">
  <div class="text-container">
    <h1 class="header1">This is a Header</h1>
    <p class="paragraph">Regular Body Text</p>
  </div>
</div>

SCSS

.slider {
  background: url('../../images/hero-bg.jpg');
  background-color: blue;
  position: relative;
  display: flex;
  align-items: center;
  background-position: center 66%;
  background-repeat: no-repeat;
  background-size: cover;
  padding-left: 5rem;
  padding-right: 5rem;
  &:before {
    display: block;
    content: "";
    padding-top: 47%;
  }
}