Android/Mobile Webkit CSS Background-Attachment:Fixed Not Working

Android/Mobile Webkit CSS Background-Attachment:Fixed Not Working?

With native browser scrolling you cannot do that. It's a bug in the default Andriod browser. To implement a fixed element at the top or the bottom you have to apply position: fixed on it and then implement a custom scrolling on the other element which contains the content to scroll.

I used this Library for this kind of problems:
http://cubiq.org/iscroll-4

You can find examples on its page.

Fixed Background not working on mobile

What is the rest of you html and body css? I have it on a site I did recently and used this. My html and body is 100% and the container is 90% so you can see the image around the container all the time

html. body {

    width:100%;

    min-height:100%;

    margin:0;

    background-image:url(images/Exeter.jpg);

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    font-family:'Open Sans',sans-serif;

    font-size:100%;

    color:#036;

 }

#container {

    width:90%;

    margin:auto;

    background-color:#fff;    

 }

Chrome issue with background-attachment fixed and position fixed elements

Found this solution on: https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property

Seems to me to be a clever way to use :before pseudo element. Limit the width for fixed width elements but works great for full width pages. Essentially comes out to look like this:

.background_fill {

  overflow: hidden;

  position: relative;

    color: red;

}

.background_fill:before {

  background-color: white;

  background: url('http://www.lausanneworldpulse.com/pdfs/brierley_map_0507.jpg') no-repeat center center;

  background-size: cover;

  z-index: -3;

  content: " ";

  position: fixed;

  will-change: transform;

  width: 100%;

  height: 100%;

}

<div class="background_fill">

  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>

  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>

  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>

  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>

  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>

  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>

  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>

  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>

  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>

  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>

  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>

  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>

  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>

  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>

  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>

  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>

</div>

---

Related Topics