[Malleys]

А сейчас наоборот)

<section class="header-background"></section>
<style>
html, body {
	width: 100%;
	height: 100%;
	overflow: auto;
	background: #eff0f4;
	margin: 0;
}

.header-background {
	padding-bottom: 20px;
	padding-top: 25px;
	background: url(https://i.ibb.co/DDWyFhR/1.png), url(https://i.ibb.co/ZgZFC9V/2.png), url(https://i.ibb.co/qjXcxM3/3.jpg);
	background-size: auto 100%, auto 100%, auto 100%;
	background-position: 0 0, 0 calc(-10vh + var(--scroll-progress, 0) * 20vh), 0 0; 
	background-repeat: no-repeat;
	height: 100%;
	overflow: auto;
	box-sizing: border-box;
}

.header-background::before {
	content: "";
	height: 200%;
	display: block;
}
</style>
<script>
document.querySelector(".header-background").addEventListener("scroll", function(event) {
	event.target.style.setProperty("--scroll-progress", event.target.scrollTop / (event.target.scrollHeight - event.target.offsetHeight));
});
</script>

Степень отклонения регулируется в строке №17 (в примере ±10% от высоты)