<div class="div-one"></div>

<div class="div-two" ></div>

<!-- Decoration-->

<div class="overlay"></div>

<div class="box">
  <h1>Responsive Triangle Background Images</h1>
</div>

<link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>

/* Code that does the work */

.div-one {
  background:red;
  width: 100vw;
  height: 100vh;
   background: url('http://farm1.staticflickr.com//447//19585243302_fae38fd86f_o.jpg');
  width: 100vw;
  height: 100vh;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}

.div-two {
  -webkit-clip-path: polygon(100vw 0, 0% 100%, 100vw 100vh);
  clip-path: polygon(100vw 0, 0% 100vh, 100vw 100vh);
  background: url('https://farm9.staticflickr.com/8644/15964625458_d5c6d431ac_k.jpg');
  width: 100vw;
  height: 100vh;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:bottom;
}

body {
  margin: 0;
}
div {
  position: absolute;
}

/* Decoration */

.overlay {
  width: 100vw;
  height: 100vh;
  background: rgba( 0, 0, 0, 0.3)
}

.box {
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform:translate(-50%, -50%); 
  text-align: center; color: rgba(250, 250, 250, 0.8); 
  border: 4px double rgba(250, 250, 250, 0.2)
}

.box h1 {
  font-size: 11vh; 
  padding: 0 1em; 
  font-family: Quicksand;
}