(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.

Could you describe how background-repeat: is not applicable to you? Or is it because the image you want to use outside of your example URL is not repeatable? — Luke, Jan 29 '12 at 12:06
In theory, the example can certainly use `background-repeat`. However, it's only to show that the background image doesn't get rendered when you viewed it on Safari (iPad). — moey, Jan 29 '12 at 12:21

score 29 · Accepted Answer · edited Jun 20 '20 at 09:12

29

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 28 '12 at 14:59

pjumble

16,880
6
43
51

The background image on the sample page is <50 KB. – moey Jan 28 '12 at 15:03
4

It's not about the file size, it's the dimensions: 1000*10000 > 5*1024*1024 – pjumble Jan 28 '12 at 15:05
Thanks for editing the answer. It's now clear it's related to the dimension; not the file size. – moey Jan 28 '12 at 15:09
Wow that's crazy! Makes sense in a way but it's frustrating that a 100k PNG file that has very large dimensions just won't show up with no visible error. – jrz Oct 25 '12 at 23:02
Thanks!! Saved me a lot of time – Flappy Dec 21 '13 at 19:19
This answer tells you a limit exists. The answer below shows you how to bypass it. – Marcelo Mason Aug 04 '14 at 11:12

Marcelo Mason · Answer 2 · 2014-12-04T22:20:00.123

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.

Wow good call, using multiple background images is very clever. — jrz, Oct 25 '12 at 23:03

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

2 Answers2

Linked

Related