CODEWITHSUNDEEP
htmlcssbackgroundfixedbackground-attachment
Adil Heybetov
Adil Heybetov

Reputation: 23

Background Fixed on Mobile Devices

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>

Upvotes: 0

Views: 1119

Answers (1)

GreyFox
GreyFox

Reputation: 11

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...

Upvotes: 0

Related Questions