mouse-position

by dokino7

HTML

<div id="header"></div>

CSS

#header {
    height: 200px;
    background-image: url('https://i.postimg.cc/BbRm96cn/daniel-mirlea-u5-Qzs-Kvu7-YA-unsplash.jpg');

}

JavaScript

document.addEventListener('mousemove', function (event) {
    if (window.event) { // IE fix
        event = window.event;
    }

    // Grab the mouse's X-position.
    var mousex = event.clientX;
    var mousey = event.clientY;
    var header = document.getElementById('header');
    header.style.backgroundPosition = '-' + mousex/3 + 'px -' + mousey/2 + 'px';
}, false);