CSS background image rendering differently on iPhone

Question

We have a page design that works great in every PC browser that I have tried, but goes strange when viewed with an iPhone or iPod Touch.

The problem is something to do with a centred background image thats very tall:

#content_container
{

background-image:url('content-background.jpg');
background-position:top center;
background-repeat:no-repeat;
width:1020px;
height:auto;
}

The content-background.jpg image is very tall (3000 pixels) and is designed to be 'revealed' as the DIV it is in grows due to content.

You'll have to look at the page and full CSS to understand, so I've stripped everything else out of the design and re-produced the problem with this example:

http://files.codeulike.com/static/cssexample/example.htm
(example made up of 1 html file, 1 css file and 3 images)

You'll see that in IE8, Firefox, Chrome you'll get a nice green box. But in an iOS browser the long thin background image gets re-scaled and everything goes odd.

(I'm using an iPod Touch 2nd gen but I assume the same problem will happen in other iPhones/iPod touches).

Any help greatly appreciated!

Answer 1

Figured it out: The iPhone has a megapixel limit for Jpegs, after which it shrinks the Jpeg.

There's a very good blog post about this on defusion.org.uk: http://www.defusion.org.uk/archives/2010/02/19/shrinking-large-background-image-bug-in-iphone-safari/

The limit after which Jpegs get shrunk seems to be around 2 megapixels. Its a documented iOS resource limit and is described here:

Apple - Creating Compatible Web Content - Know iOS Resource Limits

The maximum decoded image size for JPEG is 32 megapixels using subsampling.

JPEG images can be up to 32 megapixels due to subsampling, which allows JPEG images to decode to a size that has one sixteenth the number of pixels. JPEG images larger than 2 megapixels are subsampled—that is, decoded to a reduced size. JPEG subsampling allows the user to view images from the latest digital cameras.

.. which I take to mean that Jpegs under 2 megapixels are displayed normally, Jpegs between 2 and 32 megapixels are displayed by subsampling (shrinking), and Jpegs over 32 megapixels presumably can't be displayed at all.

Changing my site to use a background image that was under 2 megapixels solved the problem.

Answer 2

Not quite true, I have a background 1640x1200 (sub 2Mpix) and the background shrinks here... :S

Answer 3

I used Safaris CSS3 multiple background images to get around this, just made 4 images 500px tall and positioned them on top of each other

Answer 4

I realize this post is two years old as I write this, but I tried something that worked, perhaps not the best way to go but it solved my problem.

First step was to save my background image as a .png which cured the problem completely...except being a 1200px x 12000px background image, the .png file was a monster.

So, I opened the .png file in Photoshop and saved it optimized for web and devices as a .jpg and uploaded that file and it worked like a charm on the iPhone and all of the big 5 browsers.

Hope that helps!

Answer 5

If you have kept

background-attachment: fixed;

in desktop CSS file, then remember it to change it to

background-attachment: scroll;

in mobile CSS file. If this is not done that it will show unexpected effect.