change background image on scroll

I want to create a background image effect that will change the image when the user scroll. I’m facing a problem with the images urls, how i can fix this? How I can link an image url in jquery from a wordpress page?

Here is the code. The url is not correct and I can’t figure how to link it correctly from the js script.

$(window).scroll(function(e){
    e.preventDefault();
    var scrollPos = $(window).scrollTop();
      if(scrollPos >= 100){
        $('#portfolio-cover').css({'backgroundImage':'url("assets/img/top-page2.jpg")'});
      }
      else if(scrollPos >= 120){
        $('#portfolio-cover').css({'backgroundImage':'url("assets/img/top-page3.jpg")'});
      }
      else if(scrollPos >= 150){
        $('#portfolio-cover').css({'backgroundImage':'url("assets/img/top-page4.jpg")'});
      }
      else{
        $('#portfolio-cover').css({'backgroundImage':'url("assets/img/top-page1.jpg")'});
      }
  });