Background-attachment:fixed Not Working - Android Chrome (v40)
Solution 1
The below code worked fine for me in the android chrome.
html {
height: 100%;
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I got this from here
Solution 2
Had massive problems with this - it's a recurring problem in android (dating back to ver 4.0.0 at least), that has yet to be fully fixed. Bug-report here: https://issuetracker.google.com/issues/36908439
My android test machine runs chrome 60 on Android 7.0.0 - still not fully fixed. Top or center aligned backgrounds seem to work okay, but bottom alignment, and bottom-right in particular, is a nightmare in android.
Best workaround I've found, is to place your fixed background image into a separate dedicated div, as opposed to the browser background itself... (
Set your div to 100% of viewport hight and width, gived it a fixed position and a z-index of -10, then place all your background inage styling in that div instead, leaving the browser background blank.
Putting the background image into the browser is laggy at best, and most of the other workarounds I've found create jittery scrolling in older IE browsers.
All my desired background-image styling works perfectly when placed in a dedicated div. It's only when placing them in a browser background itself that things go awry.
Hope this helps.
Solution 3
This works for almost all browsers except native android browser
background-image:url(http://www.andymercer.net/wp-content/themes/andymercer/images/background/home.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover !important;
max-width:100%;
max-height:100%;
width:auto;
It is highly recomended to set image url first
Looking for a solution to the bug (background-attachment: fixed) on android browser.
Hope helps!
Related videos on Youtube
Kelderic
###About Me: A former civil engineer; now a software developer and project manager. I co-founded of Catstache Design and am currently Senior Technical Lead at Functional Devices, Inc. Unfortunately, I no longer have time to do free-lance contract work or consulting.
Updated on July 18, 2022Comments
-
Kelderic almost 2 years
Background
( This has been asked before, many times, I know. However, it seems to have been caused by different things each time. I have gone through about four different StackOverflow answer threads and tried everything. Nothing seems to be working anymore, so I believe this is a new problem. )
Anyway, I have an HMTL element with a background image that needs to be fixed, using
background-attachment:fixed;
- All desktop browsers - Works
- Mobile Firefox - Works
- Default Android/Samsung Browser - Works
- Mobile Chrome - Doesn't Work
I've spun the problem into a more simple replicable test, which is a single
section
element, set to200%
of the page height, with the background being full-screen and fixed.
Code
html,body { padding:0; margin:0; height:100%; width:100%; } section { background-position:center center; background-attachment:fixed; background-size:cover; background-image:url(http://www.andymercer.net/wp-content/themes/andymercer/images/background/home.png); height:200%; width:100%; }
<section>Test</section>
JSFiddle For Testing
For easier testing on your smartphone than a code snippet: http://jsfiddle.net/LerLz1L2/
Things I've Tried
backface-visibility: hidden;
-webkit-backface-visibility:inherit;
-webkit-transform: translate3d(0,0,0);
- Setting element and all parents to
position:static
-
MisterNeutron about 7 yearsHard to believe they still haven't fixed this one - Chrome 57.0.2987.132 on Android 7.0.0. It afflicts linear gradients and regular JPG background images. Not one of the suggested workarounds I've tried has worked.
-
MisterNeutron about 7 yearsJust to clarify - if the page needs only vertical scrolling, it's not too bad. When the address bar disappears, that amount of space then appears at the bottom, and isn't filled with the linear gradient or background image. But if the page requires any HORIZONTAL scrolling, all hell breaks loose.
-
JosephK over 6 yearsThe 'fixed' seems to be ignored in chrome on some (maybe all) phones - the background moves and leaves blank-space where it was on x and y axis scrolling. Works fine in other devices and all other browsers. Chrome has become the new "IE problem" for web-coders.
-
diewland over 6 yearsheight 100% is key
-
posfan12 almost 6 yearsIs the DIV fixed or the background inside the DIV fixed? I have a scrolling DIV element with a fixed background, but it suffers from the same problem as the original question.
-
Shannon almost 6 yearsIf you;re using the background div method I originally mentioned above, you;ll probably need to fix both the div and its background... however
-
Shannon almost 6 yearsYou'll probably need to fix both the div and its background... however - since writing this post, I managed to fix the problem without using the fixed separate background div. FIRST, include your fixed background image as part of your .html styling. NEXT, ensuring your .html height is 100% and y-overflow to "hidden". FINALLY, on your .body styling, set height to 100% and y-overflow to "scroll". This should work perfectly - you MUST set height to 100% on BOTH your .html AND your .body CSS styling, otherwise it won't work. I used this technique at [link] (m233933.000webhostapp.com)
-
Alexis Wilke over 5 yearsI think there are two important things here:
html { height: 100% }
(which OP had already) and-webkit-background-size: cover;
— the-moz-
is probably not necessary anymore and the-o-
, I don't know.