Friday, February 4, 2011

iPad & Background Images

This is kind of annoying. I'm working on a website that has to work well on an iPad, so I've been checking things with the iOS Simulator and the iPad refuses to deal with full-coverage background images properly.

To be clear, it will position a background where you tell it, it will tile a background how you tell it, it will even keep a background image fixed if you tell it. What it won't do is expand a fixed, centered background image to fill the screen. The maximum inner window sizes are 981 px and 1208 px. Even if the image is FAR larger than that in both dimensions it sits there scaled down - and if it's centered also with a white border around it.

It completely ignores the -webkit CSS for fixed, centered, covering background images and uses the old CSS method, and it still doesn't do it right.

So far the only solution I've found is pretty slapped together, but it works (sort of):

1. Create a DIV and give it an ID something like "backdrop" (or whatever)
2. Put your background image inside it, in an image tag, with the height and width hard coded to ZERO. Why? If a user doesn't have CSS available they won't get this gigantic decorative image shoved in their face.
3. In your iPad stylesheet set the image like this:
#backdrop {position: absolute; top: 0; left: 0;height: 100%;width: 100%; margin: 0;}
#backdrop img {height: 105%;width: auto;margin:0;}

If you have a sticky footer you'll need to add the negative margin-bottom to the backdrop DIV as well. Why is it 105%? Because if it isn't then you'll get a white strip down the right-hand side when the iPad is rotated horizontally. At least the image aspect ratio is maintained doing it this way.

You'll want to make sure to hide the image for anything other than an iPad or it can become obvious what you've done in a desktop browser that can be resized. iPhone seems to do things properly, btw.

Lastly, the best solution for right now is probably to use a background PATTERN that you can just tile, since the iPad seems to handle that correctly.