0

I'm building a website using bootstrap and Django. While testing out the UI, the Position: fixed; is not working on an iPhone. I'm attempting to apply this functionality to a background image. I know that Apple doesn't support this, but has anyone found a workaround? Below is my CSS:

 width: 100%;
  height: calc(100vh - 40px);
  background: url('../img/BTDARKBLUE1.png') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover !important;

  position: relative;
  margin-top: 40px;
ek1669
  • 29
  • 1
  • 4

1 Answers1

0

background-position: cover; doesn't work on the mobile browser some time. Remove this property and check it again.

Also here is the link with alot of solutions for the same problem background: fixed no repeat not working on mobile

Usman Khan
  • 1
  • Thank you the final resolution was to add z-index in the div in the section. Now the issue is that the button on that part of my site isn't working. – ek1669 Oct 20 '21 at 00:53
  • that Will be because of z-indexing. Check the z-index and make the index of the buttton about all – Usman Khan Oct 20 '21 at 05:01
  • Yep thank you! I just made a separate div for the button that isn't effected by the z-index – ek1669 Oct 20 '21 at 18:22