Repeating multiple images with CSS repeat-x

Question

I'm making a UHD project that requires displaying huge images. There's no problem with stationary browsers however iOS and some mobile browsers are very limited in that field. The max resolution for iOS PNG is 5 megapixels which is far lower than most of the images that I need to display.

Jpeg and other formats are not an option.

So far I decided to split big images into smaller ones and I've encountered a problem. I've created a fiddle to show what's going on.

JSFIDDLE

As you can see I used 2 images in "background-image" to show the exact problem. The first image (circle) appears on top of the second (square).

Here is the code for 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;
              }

And jQuery:

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

So the problem is that both "small" images are not side by side. There's no problem if I stitch them back in 1 big image. However mobile devices cannot handle it.

As far as I can see the "background-postion" in my css is ignored for some reason.

SO is there a way to apply "background-repeat: repeat-x" to the whole block of background images and put images side by side?

I need from 2 to 10 background images to be repeated as the "organic whole" at the same time.

Is it possible with the method I'm using? If not - what is the best solution?

Answer 1

Well the background property is not in any way comfortable for doing what you want to do. I advice you then to place the images in a div, which div in other hand could be displayed below the other content (with position absolute), so it acts as a background. Note that you have to set z-index to your content also, and it should be a higher number than the z-index of your "background" div. Again I advice you not to repeat the whole set of images endlessly, but rather start the animation again when it reaches the last one. Give me a comment if you need a deeper explanation of something form above.