jquery - Large CSS Background not showing on iPad -

this question has answer here:

• (really) long background image not render on ipad safari 2 answers
• are there arbitrary restrictions on maximum image pixel size in ie , webkit mobile? 1 answer

http://i.stack.imgur.com/5oan0.jpg refer link here diagram i'm doing.

this site doing. basically, have menu , 4 content areas, when press buttons on menu jquery animate() function animates scrolltop , scrollleft @ content area.

for large background (5k 5k pixels) behind content areas, using css background. however, displays on chrome on pc, firefox on android, not on chrome or safari on ipad. shows blank background. when dont use background css , use img tag in html shows instead.

what wrong? researched problem , read apple has documentation states can load jpgs gifs smaller 3 megapixels (3*1024*1024), might related? how display background css?

the file format of background png (i tried jpg too, same results)

body { margin: 0px; border: 0px; padding: 0px; width: 5100px; height: 5100px; background-image: url("../images/main/overallbg.jpg"); background-repeat: no-repeat; overflow: hidden; } 

for native apps, apple says images larger 1024x1024 avoided , should broken down smaller ones. problem here not file size on disk, size in memory: image has decoded , turned "flat" representation.

so let's math: assume image 5000x5000 pixels, 8-bit rgb. means each pixel occupies 3 bytes:

5,000 * 5,000 * 3 = 75,000,000 (roughly 71.5 mib) 

so seemingly small image fills memory fast. ios cannot throw parts away if it's under memory pressure, it's whole image or nothing.

your solution break down image smaller parts. ios can remove images aren't visible more memory (i doubt such huge image parts visible time).

you break jpeg manageable chunks , use css3 magic merge them background.

for example split 7400px high background 2048px chunks , position them this:

background-image: url('../images/bg_ipad1.jpg'), url('../images/bg_ipad2.jpg'), url('../images/bg_ipad3.jpg'), url('../images/bg_ipad4.jpg'); background-position: center 0px, center 2048px, center 4096px, center 6144px; background-size: auto auto; background-repeat: no-repeat; 

this loads on ipad @ full resolution.