Samyn Samyn - 3 months ago 7
CSS Question

iOS Safari zooming in on high resolution background images

I'm working on a website, which features a high-resolution background image. The background image is set with the following CSS

#intro {
background: url( no-repeat 50% 50% fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;

When viewed on my desktop it works fine.

When viewed in Firefox' responsive view, it works as predicted.

However when viewing this on my iPhone 5 with iOS 7 installed, it will yield this.

There is something going wrong when setting the

background-size: cover;

but I can't seem to figure it out. I've already scoured the internet.

The site itself, in a development environment:

And the place where I got the background:


Wow, it seems Mobile Safari does not support background-attachment: fixed (or, at least doesn't support it well...)

If you remove that, background-size: cover behaves as you expect, but it breaks the expected behavior...

There are some work arounds for Mobile Safari involving fixed-positioned elements behind the content to mimic background-attachment: fixed, if desired.

Off topic, but love the design!