JSFiddle - React, Tailwind, and code Playground
HTML
<div id="pageBg">
</div>
CSS
#pageBg {
background: url('http://placekitten.com/2000/2000');
height: auto;
left: 0;
min-height: 768px;
min-width: 500px;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
background-repeat: repeat;
}
JavaScript
$(function(){
$('#pageBg').mousemove(function(e){
var mousePosX = (e.pageX/$(window).width())*20;/*
$('#pageBg').css('background-position-x', mousePosX +'%');*/
var mousePosY = (e.pageY/$(window).height())*20;/*
$('#pageBg').css('background-position-y', mousePosY +'%');*/
console.log(mousePosX, mousePosY);
});
var x = 0;
var y = 0;
setInterval(function(){
x+=2;
y-=1;
$('#pageBg').css('background-position', x + 'px ' + y + 'px');
}, 10);
})
/*$(document).ready(function(){
$('#').mousemove(function(e){
var mousePosX = (e.pageX/$(window).width())*100;
$('#pageBg').css('background-position-x', mousePosX +'%');
var mousePosY = (e.pageY/$(window).height())*100;
$('#pageBg').css('background-position-y', mousePosY +'%');
console.log(mousePosX, mousePosY);
});
});
$(document).ready(function(){
$('html').mousemove(function(e){
var x = e.pageX - this.offsetLeft*2;
var y = e.pageY - this.offsetTop*2;
$('dv#').css({'top': x,'left': y});
});
});*/