Sending CSS Background Image Image Differently on iPhone

Question

We have a page design that works great in every browser I've tried, but looks weird when viewed from an iPhone or iPod Touch.

The problem is that the central background image is very high:

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

The image content-background.jpg very high (3000 pixels) and is intended to be “expanded” because the DIV it grows in is due to the content.

You need to take a look at the page and the full CSS to understand, so I removed everything else from the design and tried the problem using this example:

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

You will see that in IE8, Firefox, Chrome you get a beautiful green box. But in the iOS browser, the long, thin background image scales again, and everything goes oddly.

(I am using the 2nd generation iPod Touch iPod, but I assume that the same problem will occur on other iPhone phones and iPod touch).

Any help is much appreciated!

Answer 1

Found out: iPhone has a megapixel limit for Jpegs, after which it compresses Jpeg.

There's a very good blog post about it at 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 is shrinking seems to be around 2 megapixels. Its a documented iOS resource limit and is described here:

Apple - Create Compatible Web Content - Know iOS Resource Limits

The maximum size of a decoded image for JPEG is 32 megapixels using subsamples.

JPEG images can be up to 32 megapixels due to subsampling, which allows JPEG images to be decoded to a size that has one sixteenth - the number of pixels. JPEG images larger than 2 megapixels are downsampled, i.e. decoded to a reduced size. A JPEG subsample allows the user to view images from the latest digital cameras.

.. which I mean that Jpegs under 2 megapixels are displayed normally, Jpegs from 2 to 32 megapixels are displayed by subsampling (compression), and Jpegs over 32 megapixels apparently cannot be displayed at all.

Changing my site to use a background image with less than 2 megapixels solved the problem.

Answer 2

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

Answer 3

I used Safaris CSS3 several background images to get around this, just made 4 images 500 pixels high and laid them on top of each other.

Answer 4

I understand that this post is two years when I write this, but I tried something that worked, maybe not the best way, but it solved my problem.

The first step was to save the background image as a .png that completely cured the problem ... except that it was 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 the Internet and devices as .jpg and downloaded this file and it worked like a charm on the iPhone and all the big 5 browsers.

Hope this helps!

Answer 5

If you saved

 background-attachment: fixed; 

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

 background-attachment: scroll; 

in the mobile CSS file. If this is not done, it will show an unexpected effect.