<div class="hero">
	<h1>foo bar</h1>
</div>

* {
	margin: 0;
	padding: 0;
}
.hero {
	height: 100vh;
	background: linear-gradient(
				45deg,
				rgba(255, 175, 189, 0.7),
				rgba(100, 216, 243, 0.7),
				rgba(234, 236, 198, 0.7),
				rgba(245, 146, 176, 0.7),
				rgba(52, 219, 216, 0.7)
			)
			0 0 / 1000% no-repeat,
		url(https://picsum.photos/g/2000/1200) 0 0 / cover no-repeat;
	animation: gradientAnimation 40s ease infinite;
}
@keyframes gradientAnimation {
	0% {
		background-position: 0% 30%, 0 0;
	}
	50% {
		background-position: 100% 70%, 0 0;
	}
	100% {
		background-position: 0% 30%, 0 0;
	}
}
h1 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font: normal 600 72px/1 "Open Sans", sans-serif;
	text-align: center;
	white-space: nowrap;
}
h1 span {
	display: block;
	margin-top: 1em;
	font-size: 40px;
	font-weight: 300;
}