Subpage Headers

<div class="subpage-hero" style="background: url('//assets-cdn.interactcp.com/interactrv/images/common/headers/ban-about-us-1.jpg');">
    <div class="container">
        <h1>About Us</h1>
    </div>
</div>

.subpage-hero {position: relative;text-align: center; background-size: cover!important; background-position: center!important; background-repeat: no-repeat!important; padding: 50px 0;color: #fff;margin:  0 0 30px 0; }
.subpage-hero:after { content: ''; z-index: 1; background: #000; width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: .5; }
.subpage-hero h1 {position: relative;margin: 0;z-index: 9;}
.subpage-hero .btn { position: relative; z-index: 999; box-shadow: #000 0 5px 15px; }
.subpage-hero img { position: relative; z-index: 999; }
.subpage-hero .subtitle { color: #fff; z-index: 999; position: relative; font-size: 28px; font-weight: 700; line-height: 1.25em; }

  @media (min-width: 768px) {
    .subpage-hero { padding: 100px 0; }
  }