JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page-header">
  <div id="superelement" class="ship_head"></div>
</div>

CSS

html, body {
  height: 100%;
}
body {

}

.page-header {
  
}
.ship_head {
  background: url(https://images.wallpaperscraft.ru/image/les_derevia_tuman_124708_1920x1080.jpg) -100px -100px no-repeat;
  transition: background-position .5s ease-out;
  width: 500px;
  height: 300px;
}

JavaScript

(function(){
  var vmestobody = document.getElementById('superelement'),
      startX = -100,
      startY = -100,
      w = document.documentElement.offsetWidth,
      h = document.documentElement.offsetHeight;

	vmestobody.addEventListener('mousemove', function(evt){
    var posX = Math.round(evt.clientX / w * startX)
    var posY = Math.round(evt.clientY / h * startY)
    vmestobody.style.backgroundPosition = posX + 'px ' + posY + 'px'
  })
})()