div over div

by Guilherme Santana

HTML

<div class="site-header">
  <div class="headerImage">
<img  src="http://via.placeholder.com/990x250">  
  </div>
  <div class="headerText">
    <div class="inner">
      <div class="title">Wet Lab</div>
      <div class="subtitle">We did some cool stuff and wrote this tagline</div>
    </div>
  </div>
</div>

CSS

.site-header {
  width: 100%;
  position: relative;
  background: orange;
  display: table;
}

.site-header .headerImage {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.site-header .headerText {
  background: rgba(213, 123, 75, 0.6);
  padding: 10% 10% 10% 40%;
  display: table-cell;
  vertical-align: middle;
  position: relative;
  z-index: 2;
}

.site-header .headerText .inner {
  background: #ccc;
  padding: 30px 50px;
}

.site-header .headerText .inner .title {
  font-size: 30px;
}