Are you bored of common way to define background of the web pages by using only one image? If yes use the following script, which divides the page to two triangles and use separate images as each part background. Isn’t it interesting?


HTML
<!-- This script got from www.devanswer.com -->
<div class="div-one"></div>
<div class="div-two"></div>
<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'><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
                        

CSS
.div-one {
  background:red;
  width: 100vw;
  height: 100vh;
   background: url('http://devanswer.com/codes/files/background-1.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('http://devanswer.com/codes/files/background-2.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;
}