for vertical centred background-image on #masthead

header-parallax.js

var timeout;

window.addEventListener('scroll', function () {

    // If there's a timer, cancel it
    if (timeout) {
        window.cancelAnimationFrame(timeout);
    }

    timeout = window.requestAnimationFrame(function () {
        const scrollPosition = window.pageYOffset;
        const bgParallax = document.getElementById('masthead');
        const limit = bgParallax.offsetTop + bgParallax.offsetHeight;

        if (scrollPosition > bgParallax.offsetTop && scrollPosition <= limit) {
            bgParallax.style.backgroundPositionY = (50 - (150 * scrollPosition/limit)) + '%';
        } else {
            bgParallax.style.backgroundPositionY = '50%';
        }
    });

}, false);