First of all I dont know anything about JQuery. I am creating a webpage and i found some code that is exactly what I want, but its in JQuery. I decided to use it and try to figure it out, but I need some help. Here is my webpage https://www.jernejtratnik.com/urban/. As you can see I have page divided to 2 sections. I want background of each section to move when I hover over it. But for some reason there is a space under the picture, as if background picture wasnt big enough. I think that it has something to do with the JQuery. How do I make my background Image bigger or position it differently, so that the background will still move but there wont be any white space or repeating the image?

Here is the JQuery part:

$(document).ready(function() {
  var movementStrength = 25;
  var height = movementStrength / $(window).height();
  var width = movementStrength / $(window).width();
  $("#top-image").mousemove(function(e){
            var pageX = e.pageX - ($(window).width() / 2);
            var pageY = e.pageY - ($(window).height() / 2);
            var newvalueX = width * pageX * -1 - 25;
            var newvalueY = height * pageY * -1 - 50;
            $('#top-image').css("background-position", newvalueX "px     " newvalueY "px");
  });
  });

​