Background Fixed on Mobile Devices

Question

I wanted to do flowing content over fixed background. It works perfectly on desktop. On iOS also works but not perfect. Main problem is on android phones. It isn't covering content. If you want edit it, here is CodePen link.

body{
  height:200vh;
}
#one{
  height:300px;
  width:100%;
  background:url('https://www.w3schools.com/w3css/img_fjords.jpg') center center no-repeat fixed/cover;
}
#two{
  padding-top:30px;
  background-color:grey;
  height:400px;
  padding-left:10px;
}
.column{
  width:calc((100% / 3) - 10px);
  height:200px;
  float:left;
  margin-right:10px;
  background:url('https://www.w3schools.com/w3css/img_fjords.jpg') center center no-repeat fixed/cover;
}

<body>
  <section id="one"></section>
  <section id="two">
    <div class="column column_one"></div>
    <div class="column column_two"></div>
    <div class="column column_three"></div>
  </section>
</body>

Are you aware, you have set the height to `300px`? – Rajan Benipuri Mar 11 '18 at 21:27 — Rajan Benipuri, Mar 11 '18 at 21:27

score 0 · Answer 1 · answered Mar 11 '18 at 21:34

You can place your fixed background image into a separate dedicated div, as opposed to the browser background itself. Set your div to 100% of viewport height and width, give it a fixed position and a z-index of -10, then place all your background image styling in that div instead, leaving the browser background blank.

Dont know other workarounds. android is buggy...

Background Fixed on Mobile Devices

1 Answers1