I’ve recently noticed a rather frustrating iPhone (Safari) background display issue when a large background image contained within the BODY or a DIV element is not rendered at all (using the regular “background-image:” in the CSS).
After doing a bit of investigating, I discovered that a square image of 2289 x 2289 pixels displays perfectly but a 2290 x 2290 pixels image is not rendered at all.
This gives a total pixel threshold level somewhere between 5,239,521 and 5,244,100 – which is 5.2 mega-pixels (not megabytes), so any background images that exceed this threshold level such as a 3300 x 1600 image will not render. I would be interested if anyone finds out the exact pixel number
The background display problem seems to be related the dimensions of the image in pixels, independent of:
- How well the image is optimised – a 150KB at 2290 x 2290 pixels for example does not display whereas a 900KB 2289 x 2289 pixel image does
- The image format (PNG or JPG) – both formats fail at 2290 x 2290 pixels
The solution as far as I can see is to either break up the image into smaller tiles or use iPhone specific CSS to display a smaller background image.