Las imágenes por definición no pueden ser infinitas. Por ello, lo que se hace para que se pueda continuar hasta el final como fondo de cualquier contenedor, es justamente hacer un mosaico. Es casi una limitación física ante la que no se puede hacer nada, pero sí podrías buscar algunas alternativas para conseguir que se solucione esa limitación y hacer que en la práctica ocurra lo que necesitas.
- Usar una imagen de dimensiones de altura realmente grandes. Está claro que no vas a llegar al infinito, pero sí a lo suficiente para que el efecto quede como necesitas. En este caso además puedes hacer que la imagen acabe en un color sólido y a partir de ahí el fondo sería de ese color sólido, dando continuidad a la imagen. O hacer que la imagen acabe en una transparencia por canal alfa, de las que permite el png, para que se adapte a cualquier tipo de fondo de manera progresiva.
- Hacer que la imagen de abajo tenga una posición fija, de modo que esté bloqueada y no se mueva al hacer scroll. Esto lo consigues con algo de CSS como este:
body {
background-image: url("tu-imagen.jpg");
background-attachment: fixed;
}
- Por último se me ocurre usar Javascript para hacer que la imagen de abajo tenga un efecto "parallax", de modo que tenga movimiento, pero que no acompañe perfectamente al scroll del documento. Así podrías controlarla por Javascript a tu antojo. Esto sería algo más complejo. Hay librerías que ayudan a hacer estas cosas como Parallax.js.