Background Image Shrinking on iPad

Recently I was building a site that had full page backgrounds.  One of the pages had a long vertical background to accommodate the content.

Here is an example of what I am talking about:

Example (view on Desktop)

There really is not an issue (aside from image load) when viewing on Desktop browsers.  However, I would like this site to be compatible with the iPad as well.  Unfortunately this simple technique will not work on the iPad.

The iPad uses Mobile Safari which, by default, scales websites to fit it’s viewport.  It does this to text, images and background images.  It has to do with a resource limit put on the device from displaying large images.  The maximum number is 1024 x 1024 x 3 which is 3,145,728 (result varies a bit depending on iPhone or iPad).  However, Mobile Safari will scale your image accordingly to fit that size and your screen.

You will end up with something like this (view on iPad)


There is a simple fix and it has to do with some newer -webkit tags. Add the following to your body declaration in your CSS:

(where 1200 1900 is the size of your image)

This will only render on WebKit browsers and fix the issue of scaling.

See here (on iPad please)

This will force the iOS device to load the full background.

This tip will definitely be coming in handy again.