<div id="blend">
	<h1>Good Golly, Gradients</h1>
</div>
html,
body {
	height: 100%;
	width: 100%;
}
body {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: yellow;
}
#blend {
	width: 100%;
	height: 100%;
	background-image: url( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/people-15.jpg' ), linear-gradient(135deg, rgba(175,0,79,1) 0%,rgba(255,114,187,1) 100%);
	background-blend-mode: overlay;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 30px;
}
h1 {
	color: #fff;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 68px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.