<section></section>
<section></section>
<section></section>
<section></section>

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

html {
	background-image: url(http://lorempixel.com/y/1000/1000);
	background-attachment: fixed;	
	}

section {
	height: 100vh;
	background-color: hsla(0,75%,50%,.4);
	transform-origin: 0% 0%;
	background-attachment: fixed;
	}
section:nth-child(1) {
	transform: skew(0,-10deg);	
	background-image:
		linear-gradient(
			hsla(0,75%,50%,.4),
			hsla(0,100%,50%,.6)
		  ),
		url(http://lorempixel.com/i/1000/1000);
	}
section:nth-child(2) {
	transform-origin: 100% 0%;
	transform: skew(0,10deg);	
	background-color: hsla(110,75%,50%,.4);
	background-image:
		linear-gradient(
			hsla(110,75%,50%,.4),
			hsla(110,100%,50%,.6)
		  ),
		url(http://lorempixel.com/s/1000/1000);
	}
section:nth-child(3) {
	transform: skew(0,-10deg);
	background-color: hsla(45,75%,50%,.4);
	background-image:
		linear-gradient(
			hsla(45,75%,50%,.4),
			hsla(45,100%,50%,.6)
		  ),
		url(http://lorempixel.com/a/1000/1000);
	}
section:nth-child(4) {
	transform-origin: 100% 0%;
	transform: skew(0,10deg);	
	background-color: hsla(210,75%,50%,.4);
	background-image:
		linear-gradient(
			hsla(210,75%,50%,.4),
			hsla(210,100%,50%,.6)
		  ),
		url(http://lorempixel.com/t/1000/1000);
	}