iPhone issue with displaying a large background image

02 March, 2012 by Tom Elliott

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:

  1. 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
  2. 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.



One Comment

  • peter says:

    I can confirm this problem:
    In the mac firefox and safari the problem does NOT occur. But testing in the iphone with its native safari:
    My background: url(“./world/map.png”) is 2688×2688 -> does NOT show!
    scalling down to:
    My background: url(“./world/map.png”) is 2160×2160 -> it does show!

    Its useless to me to scale it down or break it into small pieaces. Damn it apple!

  • Leave a Reply

    Your email address will not be published. Required fields are marked *

    css.php