CODEWITHSUNDEEP
htmlcss
Sina Arzany
Sina Arzany

Reputation: 63

Fixed full screen background image on Iphone acts weird

I try to have 4 full-screen background image ( i think it's called hero section) on my page. I used this style for every row with full-screen background.

.kimiabg {
    background: url(http://kimia-tak.com/wp-content/uploads/2018/02/s2.jpg);
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 100vh;
    padding: 2rem 0;
}

everything is fine. unless showing background on iphone. it is blurry. I really do not know what is the problem.

you can check the live website here : http://kimia-tak.com

Upvotes: 0

Views: 1108

Answers (1)

Arne
Arne

Reputation: 1125

The background-attachment: fixed; is the problem. This is not really supported on iOS Safari.

Can I use background-attachment ?

iOS Safari:

  • Partial support refers to supporting local but not fixed
  • Only supports local when -webkit-overflow-scrolling: touch is not used

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

For more information and workarounds you can look at the answer from @fernandopasik to a similar question: https://stackoverflow.com/a/23420490/7426156

Upvotes: 1

Related Questions