iPad shrinks my background

I recently ran into this issue myself on a site that I was working on. The site was using quite a large image for the background (3000px x 1200px). The background worked fine on normal browsers, but did not display correctly when viewed on a mobile browser (ie mobile Safari for the iPad).

The Problem

When viewing the site on the iPad, the background image would scale down to the width of the browser window. Not cool! The rest of the content would stay the correct size, but now the background was scaled WAY too small and did not line up correctly with the content.

The Solution

Shrink the background image! Fortunately, I am not the only person who has encountered this issue so I was able to do some research and find a solution that was able to display the background image at the correct size. The fix required 2 relatively simple steps:

How small do I scale my image?

This one is really a judgement call. You definitely want to make it at a minimum, the screen resolution of the iPad which is 1064px x 768px. From what I have researched, the maximum size should not exceed a 2,000,000 pixel area (length x width). It may vary slightly but the tipping point at which iPad will scale your image is somewhere around here. There is a lot of other techo mumbo-jumbo that goes along with this, but the way I see it, most of us are just looking for the quickest fix.

Modify your stylesheet

Finally, once you have your correctly sized background image, you will want to make sure you tell the mobile browser the correct background image to use (this only applies if you have multiple versions of your background for greatest compatibility).  We will need to add a conditional media type declaration line to our stylesheet. The declaration goes like this:

@media only screen and (max-device-width: 1024px) {

	body {
		background:url(images/bkg-main_mobile.jpg) top center no-repeat;
	}
}

Pretty straight forward I like to think.

Sources:

http://www.defusion.org.uk/archives/2010/02/19/shrinking-large-background-image-bug-in-iphone-safari/ (written for iPhone but similar applies to iPad)

Safari Web Content Guide – Known Resource Limits