<div class="pane-container -one">
  <div class="pane-background"> 
  </div>
  <div class="pane-text">
    Out of this World!
  </div>
</div>
<div class="pane-container -two">
  <div class="pane-background"> 
  </div>
  <div class="pane-text">
    Travel Today
  </div>
</div>

.pane-container {
    position: relative;
    height: 100vh;
  z-index: 1;
  border-bottom: 10px solid yellow;
}
.pane-container > .pane-background {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;   
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1125145/juskteez-vu-3824%20(1).jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;  
}
.pane-container > .pane-text {
  position: relative; 
  font-size: 30px;
  color: white;
  padding: 100px;
}
 
.pane-container:last-child {
  z-index: 2;
}
.pane-container.-two > .pane-background {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1125145/test2-min.jpg');
}
 
.pane-container {
  position: relative;
  height: 100vh;
  z-index: 1;
  border-bottom: 10px solid yellow;
}
.pane-container > .pane-background {
position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;   
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1125145/juskteez-vu-3824%20(1).jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;  
}
.pane-container > .pane-text {
  position: relative; 
  font-size: 30px;
  color: white;
  padding: 100px;
}
 
.pane-container:last-child {
  z-index: 2;
}
.pane-container.-two > .pane-background {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1125145/test2-min.jpg');
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.