0

On my android and computer the images load fine, but on Iphones they are not loading and the background becomes black.

Here is the CSS and HTML

.parallax {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("duoAngelFront.jpg");
    background-size: cover;
    min-height: 100vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

<div class="parallax">
    <h1 class="text-center" style="text-shadow: 1px 1px black;color: white;padding-top:250px;font-size:3.5rem;font-family:" Montserrat"";>Zero Mile, Upgraded and Stock Boards For Sale Now!</h1>
    <p class="text-center" style="text-shadow: 1px 1px black;color: white;padding-top:50px;font-size:1.5rem;font-family:" Montserrat"";>We have a wide variety of boards in stock now that are ready to go! You can choose from our selection of already upgraded boards, a stock board or choose a stock board and the upgrades <em>you</em> want! See below for details and pictures.</p>
</div>

Here is the page: https://www.onewheelnwa.com/rental.html

I_love_vegetables
  • 1,575
  • 5
  • 12
  • 26
Nicholas Mahler
  • 1
  • 1
  • Are you using Safari on the IPhone? `background-attachment: fixed` doesn't [seem to be supported for Safari on os](https://caniuse.com/mdn-css_properties_background-attachment_fixed). [This SO question is maybe related](https://stackoverflow.com/questions/20443574/fixed-background-image-with-ios7?noredirect=1&lq=1). – michaPau Aug 08 '21 at 17:27
  • Thank you very much for your answer. I changed the background attachment to scroll in a media query targeted at mobile devices so the parallax works on desktop but then stays fixed on mobile. Simple fix, I had no idea it was not supported on Safari OS. – Nicholas Mahler Aug 08 '21 at 20:25

0 Answers0