Estoy tratando de hacer que la imagen de fondo siga el desplazamiento hasta que alcance cierta profundidad (offSetHeight de un cierto div), y más allá de eso, estoy tratando de hacer que permanezca en cierta posición. Aquí unas fotos para explicarlo un poco mejor:

Intenté hacerlo en JavaScript, pero fue en vano, ya que la imagen se estira y no puedo presionar detener cuando la parte inferior de la imagen de fondo toca la parte superior de div.

 window.onscroll = function() {onScroll()}; function onScroll() { let scrollHeight = document.body.scrollTop; let element = document.getElementById("learnMorePt2IdStandard"); // div where image should stop let elementHeight = element.offsetHeight; console.log("Element height: " + elementHeight + "\nCurrent height: " + scrollHeight); if(scrollHeight <= elementHeight){ document.body.style.backgroundAttachment = ""; } else { document.body.style.backgroundAttachment = "local"; document.body.style.backgroundSize = "auto" document.body.style.backgroundColor = rgb(254,220,50); // cover all other parts of background that image won't cover (rgb function is defined and works as intended) // document.body.style.objectFit = "cover"; } }

Intenté probar diferentes tipos de propiedades de conexión de fondo, así como objectFit, pero fue en vano.

Si el problema está en la imagen de fondo, siempre puedo intentar volver a editarlo, pero creo que podría hacerse con JavaScript de alguna manera usando la propiedad de archivo adjunto de fondo en CSS. Por favor, avíseme si puedo explicarlo más. ¡Gracias!

EDITAR: Aquí es donde estoy tratando de detener la imagen de fondo. Si el usuario desea continuar desplazándose, la imagen debe permanecer en su lugar y, a medida que el usuario se desplaza hacia abajo, "la mano" se colocará sobre el área de visualización y no seguirá el desplazamiento ni se "esconderá" detrás del div gris.