Background image not scaling properly on iOS

Question

Problem is that background images are not scaling properly on iOS devices, it's a responsive site and at least on desktop browsers it does scale great even on very small resolutions.. But when I test on iPhone/iPad it doesn't seem to be working that way.

The page is http://litoplas.net16.net/como.html (it's an internal presentation for meetings and phorums, it won't be a public link, and my customer wants his representatives to use iPads, which is the reason solving this is very important).

Here's an example of the CSS of a section I'm using with a background image:

.corte {
background: url(../images/corte.jpg) no-repeat center center fixed;
background-size: cover;
padding-bottom: 30%;

}

And as I said, the background images are scaling nicely on desktop browsers...They won't do the same on iOs!

Thanks in advance guys, I spent a lot of time searching and trying to figure this out, hopefully you'll have some answers for me! :)

Answer 1

It appears to be your shorthand rule: background: url(../images/bannercalidad.jpg) no-repeat fixed;

More specifically it is the background-attachment: fixed that is causing the issues. If I add a new rule of background-attachment: scroll then the image is no longer zoomed way far in to the upper-left corner. This may not solve all your problems but it will get you on the right path.

Answer 2

You need to have the following rule applied for each <section> like so:

background-size: 100% auto;

This fixed the problem for me using an iOS 7 simulator.