background-attachment: fixed interfering with background-size

Question

I've got a background image scaled to fit inside its container, and I have appropriate fallbacks (not shown) for when Modernizr detects that the browser does not support background-size.

.wrap {
    width: 200px;
    height: 116px;
    position: absolute;
    background-image: url(image.jpg);
    background-attachment: fixed;
    background-position: 0 0;
    background-size: 200px 116px;
    background-repeat: no-repeat;
}

Here's an example: http://jsfiddle.net/crowjonah/6xYNm/

It looks beautiful in Chrome, Firefox, Safari (desktop and iOS), however I'm having trouble on some instances of Android.

Here's a UA for a device that displays correctly:

Mozilla/5.0 (Linux; U; Android 4.0.4; en-us; Xoom Build/IMM76L) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30

and here's a UA for a device that doesn't:

Mozilla/5.0 (Linux; U; Android 4.2.2; en-us; sdk Build/JB_MR1.1) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

The newer version of Android (emulated) scales the fixed background image to be all blown out and pixellated in order to fit (I think) the viewport, and does not heed the size of its container or the defined background-size.

And that's all fine. In fact, that's what MDN says will happen:

If the background's attachment is fixed, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present.

My problem is that I don't know how to reasonably detect when that will or won't be the case so that I can adjust accordingly. Because of the layout and animations on the page, I really do want the background to be fixed for all browsers that support it well, and can settle for scroll in this outlying case if I can figure out how to target it.

Update (10/3/2013): In order to prevent confusion, I've updated the fiddle to demonstrate a more realistic and problematic example that justifies more of the CSS properties I've defined: http://jsfiddle.net/crowjonah/QtpVN/

For reference, my problem seems the same as [this one](http://stackoverflow.com/questions/13039135/css-background-image-resizes-when-i-set-background-attachment-fixed?rq=1). — crowjonah, May 17 '13 at 14:58
Have you tried this: http://stackoverflow.com/a/12244662/1947286 — apaul, May 23 '13 at 01:10
Yep: http://jsfiddle.net/crowjonah/6xYNm/13/ The problematic Android emulator passes Modernizr's backgroundsize test. — crowjonah, May 23 '13 at 13:45
have you tri this one [CSS For All Web Browser](http://rafael.adm.br/css_browser_selector/) i used that thing for some of my projects — MuntingInsekto, May 28 '13 at 07:21
I'd like to avoid UA sniffing, because I'd wind up either casting the net too broadly, or not broadly enough: If I use something like that javascript library to which you linked to target Android, mobile, Safari, the fallback would apply to more users than actually need it. Alternately, if I matched the exact problematic UA, there could very well be other variations that suffer from the same issue. — crowjonah, May 28 '13 at 13:16
What about going around it? Use a fixed positioned div as background and put the content in a div with an higher z-index. — n1xx1, Jun 16 '13 at 07:12
@N1xx1 Using fixed position divs gives mobile headaches for days... — crowjonah, Sep 03 '13 at 18:48
@crowjonah I saw the suggestion with (display: block;) below got down voted, may I ask why isn't it an option? — orustammanapov, Sep 19 '13 at 19:18

score 1 · Answer 1 · answered May 17 '13 at 00:55

1

you could prepare the CSS within two classes .works {...} and .does_not_work {...}, and then check things via JavaScript, to answer the question, which case you is faced with. Depending upon the result, the JavaScript will just adjust for these CSS classes above. In the end, who is going to switch off JavaScript within her mobile phone (i.e. Android)? What Do you think about this idea? Regards, M.

answered May 17 '13 at 00:55

Micha

181
5

I'd like to do just that! Any idea how to check with javascript whether the background-attachment is breaking background-size? – crowjonah May 17 '13 at 02:02
Hi Jonah, seems spec. on Android, it's an unresolved issue, don't know why (https://github.com/srobbin/jquery-backstretch/issues/188). May be ask for "are you an Adroid?" and if so, deliver a somewhat different experience, never forget, we have 1000sands of possibilities.. Did you find out something new, meanwhile? Reg. M. – Micha May 18 '13 at 11:25
1

This explains how to check for the computed size of a background image: http://stackoverflow.com/questions/7526907/obtain-background-image-width – skybondsor Oct 10 '13 at 16:19

score 1 · Answer 2 · edited Aug 03 '13 at 02:14

1

Remove background-size add display:block;

And try it again

edited Aug 03 '13 at 02:14

Keith Smiley

61,481
12
97
110

answered Aug 03 '13 at 01:47

masoud soroush

677
11
21

Please see my updated fiddle to see why that is not an acceptable solution: http://jsfiddle.net/crowjonah/QtpVN/ – crowjonah Oct 03 '13 at 21:06
what is that mean not working? when i click on black screen i see the different part of photo look like working fine http://jsfiddle.net/crowjonah/QtpVN/ – masoud soroush Oct 04 '17 at 22:12

score 1 · Answer 3 · answered Oct 03 '13 at 14:05

1

Have you tried

background-image:url(image.jpg); background-size: 100%;

take away position: absolute; background-attachment: fixed;

answered Oct 03 '13 at 14:05

2Truth

65
1
3
11

That won't accomplish what I'm after. See this fiddle for a better example of the desired behavior: http://jsfiddle.net/crowjonah/QtpVN/ – crowjonah Oct 03 '13 at 21:00

background-attachment: fixed interfering with background-size

3 Answers3

Linked