iPhone Safari seems to have some sort of problem whereby a page with css like this:
body {
background: #000 url(fixedimage.png) fixed repeat-x;
}
...doesn't actually lead to a fixed image. It scrolls as the user scrolls.
I've seen plenty of people kvetching about this on the internets, but no real solution. Does anyone have any ideas?
background-attachment: fixed in CSS, at best, does not work well in mobile browsers, and at worst is not even supported by the most widely used mobile browsers. You can ditch this idea completely and let the background scroll on small screens using media queries.
To keep your background fixed, scroll, or local in CSS, we have to use the background-attachment property. Background-attachment: This property is used in CSS to set a background image as fixed or scroll. The default value of this property is scroll.
Open Safari on your Mac & click on the three-toggle icon from the bottom-right of the home screen. An icon menu will pop up, scroll through the default background options, or Click on “+” to add a custom one. Once you have made the choice, click on Choose to confirm.
I've seen this site. But have not tried it out yet. look pretty complex. http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With