Background image not resizing on iPhone

Question

The background image is resizing great here , but not on iPhone (haven't checked iPad).

The image is 1393 x 1098 pixels.

Here is my css:

.slider-wrap-blue { 
background:transparent url(/images/fpfbg.jpg) no-repeat center center fixed; 
min-width: 980px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }

Answer 1

Not sure is this is the answer but I noticed you don't have the 'meta viewport' tag in your markup. Without that, scaling is the same as the desktop and might be throwing this off. I don't have an iPhone with me to look. Does the problem exist in Android, too?

EDIT: I see you mention it in one of the comments. Here is the complete meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

A couple of observations. You have an ad/comment before the doctype. This puts IE into quirks mode. Remove anything before the doctype to get rid of that problem.

Also, you are using XHTML1.1 doctype. That is for XML applications only and you are serving your pages as HTML. Use a HTML doctype.

Answer 2

I have had problems with images not being able to shrink below their initial sizes. Maybe it is shrinking down to 1393 x 1098, but will not go any smaller. I use a smaller version of the images for the phone and a larger version for tablet and desktop devices. I use the user-agent to determine the device that the webpage is running on and display the proper image.

I would classify this as a comment rather than an answer, but do not have the reputation to leave a comment yet:)

Answer 3

I had a similar problem on older devices. I changed the image from a jpg to a png and it fixed the background-size problem.

Answer 4

Perhaps try a jQuery plugin like Backstretch . It should be a better cross-platform answer.