Background-attachment is not working

Question

When I am using background-attachment: fixed in CSS.It works fine in Desktop browsers.But not working on mobile phone devices.Can any give me an idea to make it work in mobile phone

Answer 1

Some phones - ios - ignore background-attachment:fixed due to its bad performance issues

You can use pseudo-elements instead to get the same effect. I believe this will work across devices.

There's a tutorial for that here: https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property/

And here's a basic example:

* {
  padding: 0;
  margin: 0
}

body {
  position: relative;
}

body:before {
  content: ' ';
  position: fixed;
  /* instead of background-attachment */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: black;
  background: url('https://i.stack.imgur.com/wIzlp.jpg') no-repeat center center;
  background-size: cover;
  will-change: transform;
  /* creates a new paint layer */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  z-index: -1;
}

.card {
  line-height: 300px;
  text-align: center;
  color: #999;
  margin: 1em auto;
  width: 300px;
  height: 300px;
  background: rgba(0, 0, 0, .7)
}

<div class="card">
  <h1>Sample 1</h1>
</div>

<div class="card">
  <h1>Sample 2</h1>
</div>

<div class="card">
  <h1>Sample 3</h1>
</div>

<div class="card">
  <h1>Sample 4</h1>
</div>

<div class="card">
  <h1>Sample 5</h1>
</div>

<div class="card">
  <h1>Sample 6</h1>
</div>

<div class="card">
  <h1>Sample 7</h1>
</div>

<div class="card">
  <h1>Sample 8</h1>
</div>

<div class="card">
  <h1>Sample 9</h1>
</div>

Answer 2

On iOS Safari fixed doesn't work. It only supports local when -webkit-overflow-scrolling: touch is not used.

On Android Chrome it does not support fixed, it only supports local if a border-radius is set on the element.

Answer 3

always check for browser support when designing a website, so that you can immediately find other solution

here is the browser that can handle background-attachment:

https://caniuse.com/#feat=background-attachment