Background-attachment:fixed Not Working - Android

Question

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

Answer 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

Answer 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.

Answer 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!

Answer 4

i took a different approach in solving this problem. i refrained from using css background strategy and fell back to using an <img> tag and setting its css position: fixed. works like a charm, does exactly the same thing as css background image, and works on android chrome. Hope it helps.

<style>
  ._background-image {
    position: fixed;
    z-index: -1;
    width: 800px;
  }
</style>

<div style="height: 100%">
 <img src="background-image.jpg" class="_background-image">
</div>