does a background-attachment of fixed work in iOS5?

Question

Does this work in > iOS 5?

.element {
    background: url(images/myImage.jpg) 50% 0 no-repeat fixed;
}

I thought that it should, but so far it isn't.

In what way doesn't it work (not fixed, no background, etc.)? — Connor, Mar 19 '12 at 23:03
The background image doesn't appear to be fixed. It scrolls with the content. — Dylan, Mar 19 '12 at 23:12
@alpaca lips It is no duplicate. This is about background-attachment, your link is about position fixed. Both are completely different properties. — inta, Aug 23 '12 at 10:10

score 27 · Answer 1 · edited Jul 13 '15 at 15:18

27

You can potentially get around this using a separate element and position: fixed which does work!

HTML:

<div id="Background"></div>

<div id="Content"></div>

CSS:

#Background {
    background: #000 url("img/Background.jpg") no-repeat 50% 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1
}

edited Jul 13 '15 at 15:18

user193130

8,009
4
36
64

answered Nov 12 '12 at 02:02

shshaw

3,123
2
23
33

3

Add this to #Background: z-index: -1; – Jeff Mar 12 '13 at 08:34
1

Not sure why this hasn't been upvoted before now - this is the correct way to handle the problem, it's worth mentionig here that `background-attachment` can't be changed, *HOWEVER* the correct way to get the desired result is `` with `#bg-img { position: fixed }` – Brian Apr 18 '13 at 17:16
@Brian Semantically, sure; if it's an image, use an image tag. However, there are several advantages to using `background-image`. By setting the `top`, `bottom`, `left`, and `right` properties, we ensure the entire viewport is covered by the `#Background` element, but the image itself won't be stretched. You can then use `background-position` to align the image in the bottom right (if desired) and `background-size` to scale the image to viewport. – shshaw Apr 18 '13 at 21:33
@shshaw naturally, you're right, but my point was that even though there are some differences, 99% of the use-cases for fixed positioning sought through background-image positioning can be achieved with a well-coded position-fixed image (which works on iOS, unlike background-position / attachment). – Brian Apr 20 '13 at 04:22
@Brian Yeah, it all depends on the code and desired end result. A `position: fixed` image would give you a little more flexibility in positioning and manipulation with scripts / animations, but if the only issue is getting `background-position: fixed` working on iOS, since it's already set up as a `background-image` in the CSS then you can use media queries to set the `#Background` element to `position: fixed` and keep `background-position: fixed` for capable browsers. – shshaw Apr 22 '13 at 13:29
does anyone know why this solution, which does work, initially shows white space at the bottom of the iOS browser when you scroll down, but when you release your finger the white space is filled by the background? Its as though the hack is lagging... – user852974 Mar 31 '14 at 09:17
1

@user852974 The 'lag' is actually Mobile Safari not refreshing anything with `position: fixed` until the scrolling stops. Same with actual `window.scrollTop` values, at least in older versions. http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/ In iOS7, it seems to keep fixed items in place if the scrolling is below a certain speed. If the user swipes quickly, the element will reappear once the momentum stops. – shshaw Mar 31 '14 at 16:27
This is great and all, but what if you want the background to be center, top and fixed.. That's why you need background-attachment:fixed along with background-position:center top; – Nuthman May 30 '14 at 19:28
@Nuthman Adjust the background position within the `#Background` styles above. Something like this: `#Background { background-image: url("img/Background.jpg"); background-repeat; no-repeat; background-position: center top; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1 }` – shshaw May 30 '14 at 19:49

score 13 · Accepted Answer · answered Mar 19 '12 at 23:55

13

According to this background-attachment support matrix, no.

Another post suggests that coming up with a workaround for mobile devices is not worth it:

...both Android and iPhone block timers or render during scroll, so the effect is that divs move with the scrolled page and only after, eventually, divs come back in the expected position. This is against position fixed idea

answered Mar 19 '12 at 23:55

Oleg

24,465
8
61
91

Bummer, hope this will be supported soon. I'll try a different property. – Dylan Mar 20 '12 at 15:38

score 0 · Answer 3 · answered Oct 05 '15 at 19:17

There are too many issues with the fixed position on mobile and touch devices.

As long the background is not animated in any way(blur, css transistions any JS) AND as long there is no scrollbar, then it is usable and consistent.

Everything else will-depending on browser- result in undesired results, image pixelation, images scaling 100 fold on IOS devices, "jumping" divs etc.

The best work around method i have found so far, say, if you want to reproduce a fixed BG scroll page, is to use the parallax method, having one div as scrolling, the next with background transparent, rinse repeat.

It looks good enough I think, and no plugins are needed.

does a background-attachment of fixed work in iOS5?

3 Answers3

Linked