Here, I have a background image on the body and with the following script, when the user moves the mouse, the image in the background also moves.
body {
background-image: url('../images/1.png');
background-size: 98%;
background-position: center top;
background-repeat: no-repeat;
}
<script>
$(document).ready(function(){
$('#big').mousemove(function(e){
var mousePosX = (e.pageX/$(window).width())*100;
$('#big').css('background-position-x', mousePosX + '%');
var mousePosY = (e.pageY/$(window).height())*100;
$('#big').css('background-position-y', mousePosY + '%');
console.log(mousePosX, mousePosY);
});
});
</script>
My issue is that this code works perfectly in Chrome, but it's not functioning in Mozilla Firefox. How can I resolve this? Please help me out.