<div class="container">
  <p>Don't do this, don't you dare. You will not like it.</p>
<div class="image-stack">
  <div class="image-stack__item image-stack__item--bottom">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110238/texture-waves2.jpeg" alt="">
  </div>
  <div class="image-stack__item image-stack__item--top">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110238/portrait-1-cropped.jpg" alt="">
  </div>
</div>
<p>The text is above the image because we have taken the background image, which is taller than the top image out of the document flow and now the only content height that is recognized is the top image that is still statically positioned.</p>
</div>

// Non relevant styles
* {
  box-sizing: border-box;
}

p {
  font-size: 20px;
  font-family: sans-serif;
  color: #6439a9;
}

.container {
  padding: 100px 30px;
  width: 100%;
  margin: 0 auto;
  max-width: 800px;
}

// Relevant styles
.image-stack {
  position: relative;
  width: 100%;
}

.image-stack__item--bottom {
  position: absolute;
  right: 0;
  top: 0;
  width: 80%; // this is an arbitrary width, depends on the design
  z-index: -1;
}

.image-stack__item--top {
  padding-top: 20px; // arbitrary value
  padding-right: 20%; // arbitrary value
  width: 80%; // arbitrary value
}

img {
  width: 100%;
  display: block;
}