iPad iPhone scale background images

Question

Just wondering if anyone else has experienced the iPad/iPhone scaling their background images down to fit the view port.

In my case, I\'m swapping out background images

Answer 1

This worked for on iPad:

-webkit-background-size: length_x length_y;

Answer 2

The iphoneOS scales every picture with above 2 million pixels (width*height) 50% down. I managed it with spliting the background into two pictures.

Answer 3

First of all, if you export your image as a 32 bit png (I use Fireworks to do so), and use that png in your background instead of a jpg file, IOS won't scale the image. Works like a charm, and the size is about the same as a jpg with 100% quality (slightly smaller actually)

Also, aditionally for a better experience in ipad / iphone, you should:

a) set a min with do the body tag (mine is usually 980px)

body {
    min-width: 980px;
}

b) set the same width to the viewport meta tag

<meta name="viewport" content="width=980px">

Users should now be able to:
- see the design as you have created it
- zoom the content (wich they couldn't if you used "initial-scale=1, maximum-scale=1" on the viewport meta tag)
- change the device landscape to portrait and vice versa with no issues

Answer 4

All you have to do is add this meta tag within the of your pages to prevent the background image from being scaled.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />