4

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(https://s3.amazonaws.com/ooomf-com-files/XIBPemROQ9iJdUMOOBmG_IMG_1863.jpg) 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.

http://i.imgur.com/sZ0udXK.jpg

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

http://i.imgur.com/86OisbE.png

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

http://i.imgur.com/Zt6enwo.png

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:

http://websites.terarion.com/ehlen/

And the place where I got the background:

http://unsplash.com/

JasonMArcher
  • 14,195
  • 22
  • 56
  • 52
requinard
  • 921
  • 1
  • 11
  • 24

1 Answers1

10

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!

Community
  • 1
  • 1
Jack
  • 9,151
  • 2
  • 32
  • 44
  • Bummer. I'm gonna try to work with one of those workarounds. I'll report back when it works. Most of the CSS is just regular bootstrap, just with some positioning. Still thanks on the design :D – requinard Jun 12 '14 at 10:39