In the process of developing a UHD project that involves showcasing large images, I have encountered limitations with iOS and certain mobile browsers. While stationary browsers pose no issue, iOS only supports PNG images up to 5 megapixels in resolution, which falls short of what my project requires.
Unfortunately, using JPEG and other formats is not an option for me.
To work around this limitation, I have opted to divide big images into smaller ones. However, I have hit a roadblock along the way.
Here is a JSFIDDLE link where I have demonstrated the problem I am facing.
The demonstration showcases two images - a circle and a square - with the circle appearing on top of the square due to how they are structured.
Below is the CSS code snippet:
<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;
}
There is also a jQuery segment:
$(function(){
var x = 0;
setInterval(function(){
x-=1;
$('body').css('background-position', x + 'px 0');
}, 10);
});
The challenge lies in getting these "small" images to appear side by side without stitching them back into one big image, as it proves problematic for mobile devices.
It seems like the "background-postion" property in the CSS is being ignored for some reason.
Is there a way to apply "background-repeat: repeat-x" to all the background images as a cohesive unit and display them side by side?
I need to have anywhere from 2 to 10 background images repeated simultaneously as a seamless whole.
Do you think it's achievable through my current approach? If not, what would be the most effective solution to this issue?