Archive | May, 2013

Fixing Large Background Images in Mobile Safari on iPads

If you have a webpage with a very tall background image applied to your body element, Mobile Safari will try to show the entire image on the screen. This is different than desktop Safari and not what is expected to happen.

Thankfully, there is a one line change to fix this:

body{ -webkit-background-size: 2000px 1400px;}

Change the values to match the pixel dimensions of your image and viola! The background is displayed correctly.