<div id="header"></div> <style> #header { height: 200px; background-image: url('https://i.postimg.cc/BbRm96cn/daniel-mirlea-u5-Qzs-Kvu7-YA-unsplash.jpg'); } </style> <script> 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); </script>