<div class="parallax one"></div>
<div class="parallax two"></div>
div {
	display: block;
	margin: 0 auto;
	height: 100vh;
	width: 100vw;
}
.one {
	background-image: url('https://raw.githubusercontent.com/chrispxpx/codepen-poc-images/master/pxpx-rocket-orange.png');
	background-size: 150%;
	background-repeat: no-repeat;
	background-position: center 0px;
}
.two {
	background-image: url('https://raw.githubusercontent.com/chrispxpx/codepen-poc-images/master/pxpx-rocket-orange-invert.png');
	background-size: 150%;
	background-repeat: no-repeat;
	background-position: center 0px;
}
View Compiled
const parallaxElements = [...document.getElementsByClassName('parallax')];

const parallax = function(img) {
	const speed = 3;
	let pos = '-' + (window.pageYOffset / speed) + "px";
	img.style.backgroundPosition = `center ${ pos }`;
}

window.addEventListener('scroll', function(e) {
	parallaxElements.forEach( (img) => {
		parallax(img);
	});
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.