Large CSS Background not showing on iPad

Question

https://i.stack.imgur.com/5oaN0.jpg Refer to this link here with a diagram about what I'm doing.

This is a site I am currently doing. So basically, you have a menu and 4 content areas, when you press buttons on the menu the jquery animate() function animates the scrolltop and scrollleft to look at the content area.

For the large background (5k by 5k pixels) behind the content areas, I am using css background. However, it displays on chrome on pc, firefox on android, but not on chrome or safari on ipad. it just shows a blank background. However when i dont use the background css and use an img tag in the html it shows instead.

What is wrong? I researched about this problem and read that apple has some documentation that states that they can only load jpgs gifs smaller than 3 megapixels (3*1024*1024), might it be related? how to get it to display with background css?

The file format of my background is 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; }

[You can find more about the iOS resource limits here](http://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html). — Matt Gibson, Aug 12 '13 at 19:28
There's a potential solution by Marcelo Delgado to work around the webkit mobile limitation [here](http://stackoverflow.com/a/12647559/1174069). Split the background into chunks and use multiple background images (although that won't be compatible with some older browsers). — pjumble, Aug 12 '13 at 19:28

score 0 · Answer 1 · answered Aug 12 '13 at 19:34

For native apps, Apple says images larger than 1024x1024 are to be avoided and should be broken down into smaller ones. The problem here is not the file size on disk, but the size in memory: the image has to be decoded and turned into a "flat" representation.

So let's do some math: assume an image 5000x5000 pixels, with 8-bit RGB. This means each pixel occupies 3 bytes:

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

So a seemingly small image really fills up the memory very fast. iOS now cannot throw parts away if it's under memory pressure, it's the whole image or nothing.

Your only solution is break down the image into smaller parts. iOS can then remove images that aren't visible any more from memory (I doubt with such a huge image that all parts are visible all the time).

You could break up the jpeg into manageable chunks and then use some css3 magic to merge them all up into the background.

For example I split a 7400px high background into 2048px chunks and position them back together with 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 the iPad at full resolution.

Large CSS Background not showing on iPad

1 Answers1