<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 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="">
<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>
// 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;
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.