(Really) Long Background Image Does Not Render on iPad Safari

Question

For some unknown reasons, iPad Safari doesn't display a really long background image. In my example, the background image is 1,000 x 10,000 pixels. The same example works on any desktop browser e.g. Safari, Firefox, etc.

I am aware of the background-repeat in CSS but unfortunately it isn't applicable in my specific case.

Answer 1

Mobile Safari has limits to what size background images it will display before subsampling, you may be getting hit by this problem because of the size of your background:

The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM.

That is, ensure that width * height ≤ 3 * 1024 * 1024 for devices with less than 256 MB RAM. Note that the decoded size is far larger than the encoded size of an image.

see: Know iOS Resource Limits

Answer 2

You can achieve this by using multiple background images. Slice up your long jpeg into manageable chunks that conform to the limit, and then use css3 magic to merge them all up into a single background.

For example I sliced up a 7400px high image 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.