I found out that the problem is caused by the url bar in Chrome on mobile device.

What it does is that when the page is scrolled to a point where the url bar disappear (or shift upward "out of the screen"), my background image shifts up along and leaving a white space, the same height as the url bar, at the bottom.

When I keep scrolling, my background image resizes(in this case expands) to fit the viewport size.

What I would like to achieve is that the background image stays the same size and does not jump around, basically ignore the effect of the url bar.

I searched for solutions, however they usually involve JS, as a beginner I only know HTML and CSS at the current stage, hence I was wondering if there is anyway I can solve this problem using just CSS.

ps: I encountered this problem when doing my freeCodeCamp challenges, although it was not part of the assignment, I wanted to get myself used to mobile website responsivity. Below is my code for the background. Thank you very much!

body::before{
  content:'';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  background-image: linear-gradient(0deg, rgba(250,250,250,0.2497592787114) 0%, rgba(250,250,250,0.7483587184873958462) 100%), url("https://i.imgur.com/zvKvhA5.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}