My site's background image is being scaled down on iPhone. Help!
jayjaypowpow
http://www.apostlesnyc.com/
Looks great on popular browsers, except on the iPhone. For some reason
iPhone Safari is scaling my background images to fit the page
vertically. I have the center column white box burned into the
background image to save on k size, so the scaling of the background
image makes the site look rather broken.
In my searches & trials I can't seem to find a fix. Anyone else
encounter this weirdness and have a solution?
Any help appreciated. Thanks!
Jason
Simon Fraser
on the phone, so is being subsampled and thus shown at a reduced size.
See:
<http://developer.apple.com/DOCUMENTATION/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/chapter_2_section_6.html
>
One solution would be to cut this into 3 images, and use them as image
background on three separate divs.
Simon
Simon Fraser
On Jul 14, 2008, at 11:20 pm, Simon Fraser wrote:
> Your background image, at 1500x2000px, exceeds the maximum image size
> on the phone, so is being subsampled and thus shown at a reduced size.
> See:
> <http://developer.apple.com/DOCUMENTATION/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/chapter_2_section_6.html
>>
>
> One solution would be to cut this into 3 images, and use them as image
> background on three separate divs.
I thought of another, simpler solution. Use the CSS3 background-size
property to ensure
that even if the image is scaled down, it gets drawn at the correct
size:
body{
background-image: url(http://www.apostlesnyc.com/mediafiles/bgm1.jpg
);
-webkit-background-size: 1500px 2000px;
}
Simon