Descubrí que el problema se debe a la barra de URL en Chrome en el dispositivo móvil.

Lo que hace es que cuando la página se desplaza hasta un punto en el que la barra de URL desaparece (o se desplaza hacia arriba "fuera de la pantalla"), mi imagen de fondo se desplaza hacia arriba y deja un espacio en blanco, a la misma altura que la barra de URL, en el fondo.

Cuando sigo desplazándome, mi imagen de fondo cambia de tamaño (en este caso, se expande) para ajustarse al tamaño de la ventana gráfica.

Lo que me gustaría lograr es que la imagen de fondo permanezca del mismo tamaño y no salte, básicamente ignore el efecto de la barra de URL.

Busqué soluciones, sin embargo, generalmente involucran JS, como principiante, solo sé HTML y CSS en la etapa actual, por lo tanto, me preguntaba si hay alguna forma en que pueda resolver este problema usando solo CSS.

pd: Encontré este problema al hacer mis desafíos de freeCodeCamp, aunque no era parte de la tarea, quería acostumbrarme a la capacidad de respuesta del sitio web móvil. A continuación se muestra mi código para el fondo. ¡Muchos gracias!

 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; }