18

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
Community
  • 1
  • 1
Kelderic
  • 6,502
  • 8
  • 46
  • 85
  • It's also not working for me. I haven't yet found a solution. Chrome 54.0.2840.85 running on Android Nougat. – Cypress Frankenfeld Nov 18 '16 at 03:47
  • 2
    Hard 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 Apr 19 '17 at 12:31
  • 1
    Just 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. – MisterNeutron Apr 19 '17 at 15:56

5 Answers5

7

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

erikvimz
  • 5,256
  • 6
  • 44
  • 60
devCra
  • 129
  • 1
  • 5
  • 4
    height 100% is key – diewland Dec 29 '17 at 08:02
  • I 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. – Alexis Wilke Nov 04 '18 at 06:21
3

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.

Shannon
  • 41
  • 4
  • Is 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. – posfan12 Jun 07 '18 at 19:22
  • 1
    If 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 Jun 11 '18 at 04:54
  • 1
    You'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] (http://m233933.000webhostapp.com) – Shannon Jun 11 '18 at 05:11
1

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!

Sergio Quintero
  • 119
  • 13
  • 1
    The '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. – JosephK Aug 12 '17 at 09:17
0

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>
one
  • 1
  • 1
0

It's still a bug, refer this issue -> https://issuetracker.google.com/issues/36908439

Vikram Sapate
  • 1,087
  • 1
  • 11
  • 16