0

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

Xantium
  • 11,201
  • 10
  • 62
  • 89
Sina Arzany
  • 53
  • 9

1 Answers1

1

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

Arne
  • 995
  • 1
  • 8
  • 16