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
3
  • It's also not working for me. I haven't yet found a solution. Chrome 54.0.2840.85 running on Android Nougat. Nov 18, 2016 at 3: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. Apr 19, 2017 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. Apr 19, 2017 at 15:56

5 Answers 5

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

2
  • 4
    height 100% is key
    – diewland
    Dec 29, 2017 at 8: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. Nov 4, 2018 at 6: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.

3
  • 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 7, 2018 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, 2018 at 4: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] (m233933.000webhostapp.com)
    – Shannon
    Jun 11, 2018 at 5: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!

1
  • 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, 2017 at 9: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>
0

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.