<div class="hero"></div>
body {
  background: #f2f2f2;
  text-align: center;
}

.hero {
	background:
	linear-gradient(to right, rgba(75, 123, 211, 0.5), rgba(22, 215, 177, 0.3)),	url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/gradient-bg.jpg);
	
	width: 100vw;
	height: 100vh;
	background-size: cover;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.