CSS workaround for iPhone responsive design bug

Question

I've created a new page for our social club and have some problems with it. It's a responsive site with one-page design. On the intro section, there's just a background image with a simple logo.

Now everything looks good on android and most pc browsers, but somehow the iphone browser shows the background image zoomed.

Does somebody know an workaround for that?

You can try it yourself on http://juku-tbg.de/

Chrome Screenshot: -> OK

Iphone Mode on Chrome: -> OK

Screenshot from android device: -> OK

Screenshot on an iphone 5s: -> NOK

Thanks a lot.

Answer 1

background-attachment: fixed is bugged in mobile Safari. For a fix use a seperate container and apply position: fixed to it instead.

#bg {
    background-image: url('path/to/img.jpg');
    background-attachment: scroll;
    background-position: center top;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    min-height: 100%;
    z-index: -100;
    position: fixed;
    top: 0;
    left: 0;
}