IssueTracker

Yes, this is a deficiency in our current design. We don't have a short term solution or workaround.

After 3 months of last reply, do we have any solution yet for background-
attachment:fixed; issue on Android?

Not yet. We are working on it.

One workaround is to set the background color transparent and then change the
background image to what you want.  This will act similarly to a fixed background,
one draw back is that you have to be able to control the web page html (versus any
website on the web).

view = (WebView) findViewById(R.id.entry_view);
....            
view.setBackgroundColor(0);  // make the background transparent
view.setBackgroundResource(R.drawable.entrybg);  // give it the right background

Note - be sure to remove any "background" style on the webview html.

Found a way to fix this, if it hasn't been already. When doing it instead of:
background-attachment: fixed;

Do:

background-attachment: scroll;

For some reason it will stop that awkward scrolling effect of the browser. It works
for me on my mobile site for android. fixed itself does not.
Hope this helps!

how is the fix for this issue coming along?

sammorris: This forum is for bug reporting. I can't comment on status here.

Still not fixed huh?

It seems the turnaround posted on the comment 4 is no longer possible in from android 2.2. ( issue http://code.google.com/p/android/issues/detail?id=14749 ).

I'm angry about these bugs that are far from being neglectable and that are ignored by the team.

this example is perfect but sir i learn android self so please help me where write this css code in android.. in which file  write this code ??please help me

We will be posting a fix to this on our blog at blackbirdi.com .. Sine most mobile browsers do not support the fixed background image we had to find a way to work around the issue and keep the bugs out. We have completed multiple fixes with no problems

Here is an example
testakron.cravespot.com

I am not sure how long the exampel link will be live so pif it is down then please check out the blog

Support for this was added in Jellybean 4.1.

Will this be ported in Chrome for Android ??

Still have the same problem with android 4.2

OK. Seriously, 4 years later and this issue STILL presents itself? Confirmed issue still exists on Android 4.1.

First… I make to claim to be either a CSS or Android OS expert. Just sharing what I discovered... A suggestion for Android’s seeming lack of ability to center a background image specified in the CSS.

Typically the background image is specified within the body parameter of the CSS.

Original CSS:

body {
        background:url('../images/thematic/header.png');
        background-repeat:no-repeat;    
        background-position:center 10px;
        margin:0 auto 30px auto;
} #wrap {
        padding:0 0 20px 0;
        margin-top: 200px;
        margin-left: auto;
        margin-right: auto;
        width: 1024px;
        background-color:#FFFFFF;      
       
} #header {
        margin:0 30px 0 30px;

In my experiments with Android, I noticed that all the other DIVs within the body behaved correctly, including centering, so I moved image to another DIV and it worked.

Updated CSS:

body {
        margin:0 auto 30px auto;
        padding:0;

} #wrap {
        padding:0 0 20px 0;
        margin-top: 0;
        margin-left: auto;
        margin-right: auto;
        width: 1024px;
        background-color:#FFFFFF;      
       
} #header {
        background:url('../images/thematic/header.png');
        background-repeat:no-repeat;    
        background-position:center 10px;
        margin:0 30px 0 30px;
        padding-top:200px;

STILL an issue in Android regardless of browser used.

Still an issue in Android 4.1.2

seriously.. a 4 year old bug that prevents websites from rendering properly... the downside of opensource.. everyone has something "sexier" to develop than to fix bugs

My background image works on every browser but Chrome for Android.. Background is pushed up. Website looks perfect in the native samsung browser for android.

I have found a workaround for background image problems on Chrome for Android: apply the css to the html tag, not the body tag. Example:
html {
        background: url(bg.png);
        background-position: center;
        background-attachment: fixed;
        background-repeat: no-repeat;
}

I've tried some of these workarounds, but here's the solution I found (no html changes needed):

html, body {
        height: 100%;
}
html {
        overflow-y: hidden;
}
body {
        overflow-y: scroll;
}
body {
        background: [whatever];
}

#23 preotgee...@gmail.com
I've tried some of these workarounds, but here's the solution I found (no html changes needed):

html, body {
        height: 100%;
}
html {
        overflow-y: hidden;
}
body {
        overflow-y: scroll;
}
body {
        background: [whatever];
}


This worked, Thanks for sharing, been searching for a long time.

[Comment deleted]

I've tried some of these workarounds, but here's the solution I found (no html changes needed):

html, body {
        height: 100%;
}
html {
        overflow-y: hidden;
}
body {
        overflow-y: scroll;
}
body {
        background: [whatever];
}


This actually worked for fixing the background on chrome for android, but it breaks two finger scrolling for synapsis touchpads (windows) and up/down arrow scrolling in Chrome for Desktop.

You're right about it breaking up/down arrow scrolling. If you click on the page arrow scrolling begins to work. I haven't figured out a workaround for this.

The solution is browser sniffing and only applying the fix to Android devices.

Yeah, after 4 years we, developers, found a workaround. The problem is how concerning is the fact that Google doesn't give a f. for a basic bug. Are they trying to kill webview development in Android?? This is, at least, a shame for Google, who has billions to spend in qualified personal...Apple's iOS devices don't have this bug, Windows Phone too.

#23 preotgee...@gmail.com

I've tried some of these workarounds, but here's the solution I found (no html changes needed):

html, body {
        height: 100%;
}
html {
        overflow-y: hidden;
}
body {
        overflow-y: scroll;
}
body {
        background: [whatever];
}


This workarround is perfekt!
I use it in my project and make a little update

html, body {
        height: 100%;
}
html {
        overflow-y: hidden;
}
body {
        overflow-y: scroll;
        background: [whatever];
        background-size: 100% 100%;
}

Thanks

P.S.: Visit my blog at www.tobias.feldmeth.de, thx

4 years and this is still buggy, shame on google...

This works great

html, body {
        height: 100%;
}
html {
        overflow-y: hidden;
}
body {
        overflow-y: scroll;
}
body {
        background: [whatever];
}

But it's a bitch when trying to take a screenshot, half the page gets cut off :/

This worked pretty well to me =)

html, body {
        height: 100%;
}
body {
        overflow-y: scroll;
}
body {
        background: url("../images/background.png");
}

This was my workaround that worked fine so far.
Use the background in the css of the html, and set a min-height with the approximate size of your content when using the small screen.

html {
        min-height: 752px;
        background: url(/images/background.jpg) no-repeat fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
}
html, body {
        width: 100%;
        height: 100%;
}

I had the same issue.  Setting the background to scroll was the best fixed for me.

I fixed by removeing the fixed value from background, and moving the background on a <div> with position fixed and 100% height and width.

#36 arsenalw...@gmail.com

Can you write you example ???

thanks !!!

#37 newoffic...@gmail.com
I found the same solution as #36 arsenalw...@gmail.com

[CSS]
#background {
    position: fixed;
    width: 100%;
    height: 100%;
    background: url(/images/background.jpg) no-repeat;
}

[HTML]
<html>
<body>
    <div id="background"></div>
    <div id="content">...</div
</body>
</html>

It´s the same if you set this in your webview:

webView.setBackgroundColor(0);
WebView.setBackgroundResource(R.drawable.yourImage);

This work perfectly for me! don´t forget put the body background-color in your html to transparent.

:P

i hope this helps :
#background {
  background:url(../img/backimages.png) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

works for me, and dont use fixed css for mobile

The tip with #background {position:fixed;...} causes glitches in IE (at least 11).

The background-div (#background) shakes when the user scrolls down or up (it looses its position for a short time everytime you scroll and then gets its position back, which causes "jitter" / disturbing movement).
Tested on a pretty good machine (not a performance issue, I'd say) on Windows 8. It's annoying that background-fixed is not working for the android-browser..

None of the tips worked for me. Admittedly, my Android Testing Device is 4.0.4 and outdated.
The only tip that would have worked, was

html {
        overflow-y: hidden;
}
body {
        overflow-y: scroll;
}
But that temporarily cuts content when scrolling on the android device (weird behavior, that you definitely don't want on your page).

I would give up and fall back to repeat-y but even that wouldn't work on my android-device. Damn it.
Can't use a wrapper div, because the background-size must cover the viewport, not the content (long pages would mess the background-image, would be too large).

Maybe someone is interested in this workaround that works for me:

It uses the tip with the fixed positioned div (#background{position:fixed}) but by performing a basic User-Agent-Detection, this will only be applied to android-devices (so the jitter / shaking in IE goes away).

For all Browsers and devices _not_ being android, the background-image is applied to the body with background-position:fixed. Nothing special here.

Server-Side User-Agent-Detection applies a class "android" to the <html>-tag -> <html class="android" >, if it is an Android-User-Agent, otherwise no class.

Using the #background div mentioned above, the android specific CSS can then look like this:
.android #background{
   position:fixed;
   width:100%;
   height:100%;
   background-image:inherit; /* uses the image from body */
   background-size:cover;
   background-position: 50% 50%;
   background-repeat:no-repeat;
}

Example in more detail:

php User-Agent-Detection:

public function isAndroid(){
  return(stripos($_SERVER['HTTP_USER_AGENT'], 'android')!==false);
}

example html / php just to show an example, I'm not actually using inline-php
<html class="<?php if(isAndroid()){echo 'android';} ?>">
...
<body>
   <div id="background"></div>
   ...
</body>

CSS:

body{
  background-image:url(myimage.jpg);
  background-repeat:no-repeat;
  background-position:50% 50%;
  background-size:cover;
  background-attachment: fixed;
}
.android #background{
   position:fixed;
   width:100%;
   height:100%;
   background-image:inherit; /* uses the image from body so you don't need to define it twice, you could as well define your image using 'url(myimage.jpg)'*/
   background-size:cover;
   background-position: 50% 50%;
   background-repeat:no-repeat;
}

When using this, be aware, that android user-agents will display the background-image in the body _and_ in #background. This fact just doesn't matter for me.
Also be aware that this is very basic User-Agent-Detection and might not work 100%.

This workarround is prefect on Android 4.2.2 !

I use it in my wordpress project only on home-page (domainedegardanne.com) and make a little update:

html, body {
        height: 100%;
}
html {
        overflow-y: hidden;
}
body.home.page {
        overflow-y: scroll;
        background: url(http://..jpg) center top;
        background-size: center 100%;
}

Thanks a lot

At this point, we just passed the six year aniversary of this bug.
Isn't the default android browser made by google? Why does that thing work but chrome not?

All these workarounds didn't work for my site :(
Chrome: 43.0.2357.93
Android: 4.2.2

[Comment deleted]

I would also really like to have a fix released. My desktop site works great, and in the element inspector I see that unchecking background-attachment: fixed triggers the issue I'm getting on my mobile device. When will this be resolved?

really wish this could be fixed, would make my dev life so much easier.

[Comment deleted]

That issue just made me a bit embarrassed.... Hope it get updated so I don't have to use something other than CSS.

no one of the css tricks provided here is working perfect or has no bad effects for other browsers... please fix!!

7 damn years? SERIOUSLY?

Adding my voice to this issue, in the hopes that one day this works like it should.

[Comment deleted]

blah! problems with this..

[Comment deleted]

Please fix this..
http://caniuse.com/#feat=background-attachment

[Comment deleted]

woah, can we help get this one resolved? I can help!

Adding my voice to this issue, in the hopes that one day this works like it should.

This one worked fine for me guys:
 html {
 height:100%;
 min-height:100%;
}
body {
 min-height:100%;
}

Over 7 years now, what a shame!

Just discovered it! This is the sort of thing that made me give up web design, but it was always directed at Internet Explorer then. Doesn't look like it's going to be fixed.

Hei Chrome team, please ask Firefox team development to help you, becouse you cannot.

I don't think any of these workarounds will work for me as I require multiple fixed background images.  I have no problems with fixed backgrounds on firefox mobile. For those with a single background image check out this stack overflow thread
http://stackoverflow.com/questions/26372127/background-fixed-no-repeat-not-working-on-mobile has a workaround provide by Vincent that has many upvotes, which I have pasted below

I have found a great solution for fixed backgrounds on mobile devices requiring no JavaScript at all.

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(photos/2452.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
Please be aware of the negative z-index value of -10. html root element default z-index is 0. This value must be the smallest z-index to have it as background.

Why is this bug closed on Sep 2012 if it's still not fixed yet? Another shameful bug in my collection?!

soon 8 years.. and still not fixed... wow.

Please fix.

it works on the simulated android device in DevTools. Not in the chrrome Browser of my Nexus 5P

Still not working, even after 8 years

This bug is marked as "Status: fixed" since 2012. Perhaps this bug was originally intended for the old android browser, and now the bug is Chrome's fault?

https://bugs.chromium.org/p/chromium/issues/detail?id=344338#

Good job by the Google team on Android Chrome. Lots of threads in the web about this problem on the browser, arrived here because have the same issue, and I can see it is coming from 2010, ¡and marked as Fixed!

2/05/208, still an issue
BTW, the only "fix" for me was this obscenity:

html{
    margin: 0;
    padding: 0;
    height:100%;
    min-height:100%;
    overflow:auto;
     }
body{
    margin: 0;
    padding: 0;
    min-height:100%;
    overflow:auto;
     }
@media all and (max-width: 768px) {
        html {
                height: 100%;
                background: url('bg-mobile.png') no-repeat center center fixed;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: 100% 100%;
                overflow: hidden;
        }
}
@media all and (min-width: 769px) {
        html {
                background: url('bg.png') no-repeat center center fixed;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: 100% 100%;
        }
}

The solution in #64 worked for me, however, as the top bar came in and out of view, the background image would resize, and that was quite jarring.

I fixed this by changing height: 100%; to height: 100vh;

Now it's rock steady.

Still doesn't seem to work for me.

Still not fixed.
The workaround i took was to use another DIV set to width:100vw, height:100vh, position:fixed, top:0, left:0 with a background image.

Seriously we're in 2019 and it's still not fixed..

As stated above use another div and nest it within the div you want the fixed background to be. Use this CSS class -

.bg-fixed-fix {
    background-attachment: fixed;
    background-image: url(../img/back.jpg);
    background-repeat: no-repeat;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

works for both Android and desktop.

It. Is. Not. Fixed.

lol

worked in FF btw

wtf the fixed background-attachment still doesnt work in chrome on android

Shame on google . It's july 2020 ,still this bug is not fixed .
works well on firefox android.
Google even does not look our comments.

Hey google developers, Eat something of firefox developers.

SHAME on the chrome team, its been a decade and it is still not fixed!!!!

First of all. This is not the correct issue tracker, you should add it to the Chromium issue tracker. Secondly, on what devices and browsers does this not work on? Did a quick test on the latest Chrome 87 on Android and the latest Chrome 87 on Windows 10. And both worked perfectly fine. At least using this example: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-attachment

Sorry, forgot adding the background-position: center. That doesn't work in Chrome 87 on Android. But should still submit this to the Chromium issue tracker instead.

Is there an issue to track this in the Chromium issue tracker?

It is still not fixed, what are you guys doing?

This has been a huge rabbit hole for me, and quite a big headache. How is this still not fixed after 10 years?? 'background-image' works fine on desktop but not on Android Chrome? I don't have a clue how to fix it, even though it seems trivial.

Please someone ;-;