CODEWITHSUNDEEP
javascripthtmlcssbackground-image
Rtl Dev
Rtl Dev

Reputation: 1

background-attachment: fixed is not working on mobile devices

I am building a personal site . But I have a big problem ,background-attachment: fixed is not working on mobile devices . I have 4 sections, with bg fixed, + javascript effect .

The last section is very important ... Can someone help me please to fix these probleme ? I will realy apreciate . The site is here : my site

.hello
background-image: url("../img/hello.jpg")
background-repeat: no-repeat
background-size: cover
background-position: center
background-attachment: fixed
height: 100vh
min-height: 600px
display: flex
flex-direction: column
justify-content: center
align-item: center
text-align: center

// Sorry for my bad english ,

Upvotes: 0

Views: 5394

Answers (1)

will
will

Reputation: 2007

It's unsupported on mobile unfortunately...browsers have to completely re-render the image each time you scroll and in the past it was too much of a performance hit, although it does look like support for it is starting to trickle out https://css-tricks.com/almanac/properties/b/background-attachment/. The only way to get a comparable effect at the moment is to have your backgrounds as separate elements with position: fixed, like...

.background{
 position: fixed;
 background-image: url(image source);
 top: 0;
 left: 0;
 width: 100%;
 height: 100%:
 z-index: 0;
}

and everything that scrolls over it should have either position: relative or position: absolute with a z-index higher than 0.

Upvotes: 1

Related Questions