0
<div class="home-banner"></div>

I have an issue in background-position only in iPhone devices. But it's working well on other devices and browsers and responsive simulators. But it's not working in real iPhone devices.

This is the CSS I used:-

@media (min-width:315px) and (max-width:600px){ .home-banner { background-image: url(http://www.asdaniadventures.com/cmsasdani/image/data/banner/Banner.jpg); height: 100vh; background-size: cover ; background-position: 65% 0 ; background-repeat: no-repeat; } }

am_safvan
  • 1
  • 2
  • would you please provide more details about the issue. What exactly happens on iPhone? and on which model of iPhone did you check? and on which browser? – nmak18 Jul 12 '19 at 05:19
  • @nmak18 Thanks for your reply. actually my css is working well in other devices. but they haven't work in iphone 6, 7, 8. this is the website if you want to check as well :- http://www.asdaniadventures.com/ – am_safvan Jul 12 '19 at 05:34
  • Hi check this out it should answer your query https://stackoverflow.com/questions/3183467/css-background-position-not-working-in-mobile-safari-iphone-ipad – Akshay Bhat Jul 12 '19 at 05:40

1 Answers1

0

the issue is due to lack support for background-attachment in Safari on iOS devices. Change the background-attachment: fixed to background-attachment: scroll and background position issue should get resolved.

Refer to caniuse for the support matrix. You might want to look at an alternative solution for creating parallax effect or disable parallax effect on iPhone

Read more on parallax effect with background-attachment

Alternative solution provided by Callum Findlay

nmak18
  • 1,059
  • 8
  • 24
  • I just did a test on the Callum Findlay solution. It does not work in Safari 13 on iOS. – Jette Apr 22 '20 at 09:46