Repetición de imágenes múltiples con CSS repeat-x

Estoy haciendo un proyecto de UHD que requiere mostrar imágenes enormes. No hay problema con los browseres estacionarios, sin embargo iOS y algunos browseres mobilees son muy limitados en ese campo. La resolución máxima para iOS PNG es de 5 megapíxeles, que es mucho más baja que la mayoría de las imágenes que necesito mostrar.

Jpeg y otros formattings no son una opción.

Hasta ahora, decidí dividir grandes imágenes en pequeñas y he encontrado un problema. He creado un violín para mostrar lo que está sucediendo.

JSFIDDLE

Como puede ver, usé 2 imágenes en "background-image" para mostrar el problema exacto. La primera image (círculo) aparece sobre el segundo (cuadrado).

Aquí está el código para CSS:

<style type="text/css"> html { overflow-x: hidden; } html, body { height: 100%; width: 100%;} body { overflow-x: hidden; background-image: url('http://www.clipartbest.com/download?clipart=di7eRd49T'), url('http://i126.photobucket.com/albums/p89/robertthomas_2006/600x600.png'); background-repeat: repeat-x, repeat-x; background-position: left, right; } 

Y jQuery:

  $(function(){ var x = 0; setInterval(function(){ x-=1; $('body').css('background-position', x + 'px 0'); }, 10); }); 

Entonces, el problema es que las dos imágenes "pequeñas" no están una al lado de la otra. No hay problema si los vuelvo a coser en 1 gran image. Sin embargo, los dispositivos mobilees no pueden manejarlo.

Por lo que puedo ver, la "position de background" en mi CSS se ignora por alguna razón.

¿Hay alguna forma de aplicar "background-repeat: repeat-x" a todo el bloque de imágenes de background y poner las imágenes una al lado de la otra?

Necesito de 2 a 10 imágenes de background para repetirse como el "todo orgánico" al mismo time.

¿Es posible con el método que estoy usando? Si no, ¿cuál es la mejor solución?

Bueno, la propiedad de background no es cómoda para hacer lo que quieres hacer. Le aconsejo que coloque las imágenes en un div, que div en otra parte podría mostrarse debajo del otro contenido (con la position absoluta), por lo que actúa como background. Tenga en count que también debe establecer un índice z para su contenido, y debe ser un número mayor que el índice z de su div "de background". Una vez más le aconsejo que no repita todo el set de imágenes sin fin, sino que comience nuevamente la animation cuando llegue al último. Deme un comentario si necesita una explicación más profunda de algo arriba.