I am doing a UHD project that requires displaying huge images. There are no problems with stationary browsers, however iOS and some mobile browsers are very limited in this area. The maximum resolution for iOS PNG is 5 megapixels, which is much lower than most of the images I need to display.
Jpeg and other formats are not an option.
So far, I decided to split large images into smaller ones, and I ran into a problem. I created a violin to show what was happening.
JSFIDDLE
As you can see, I used 2 images in the "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);
});
, , "" . , . .
, "background-postion" css - .
SO "background-repeat: repeat-x" ?
2 10 , " " .
, ? - ?