2 years ago

#19928

test-img

xijdk

Is there an actual fix of background-attachment: fixed on mobile devices?

Is there an actual fix of background-attachment: fixed on mobile devices?

When you design your site background like this:

section {
  background: cover fixed no-repeat;
}
.section-1 {
  background-image: url(../img/test-image.jpg);
}
.section-2 {
  background-image: url(../img/test-image-2.jpg);
}
<section class="section-1">
<!--Some content here-->
</section>
<section class="section-2">
<!--Some content here-->
</section>

It looks the best way when the images scrolled are making a parallax effect. It's made by background-attachment: fixed but most mobile browsers (I tried mobile Safari on several issues but, according to support tables, I'm sure that it appears on Android too) doesn't support it.

I have browsed through the many resources on internet but I didn't find a simple solution. Now I think about some small js polyfill that will make the same effect as background-attachment: fixed does on Macs and PCs?

android

css

mobile

mobile-safari

polyfills

0 Answers

Your Answer

Accepted video resources