0

I've got a full width hero background that is working properly on every browser we tested except for Safari on iPhone and iPad. It does work on iMac Safari. On iPhone and iPad it doesn't appear. Here's the code:

.hero {
    margin: 0;
    padding: 0;
    height: 600px;
    background-image: url('../images/heroFullScreen.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

You can view the site here: https://sanitonplastic.ca to recreate the problem if you've got one of the devices.

Really hope someone can help, we're supposed to be going live tomorrow.

Thank you!

Seamus O'Hara
  • 483
  • 1
  • 4
  • 6
  • 1
    The image does not appear in chrome. But on safari it appears: the In chrome it doesn't appear because you have this `fadeonload` class here `container-fluid hero` However, check this out - https://stackoverflow.com/a/31445503/8098173 – martinho Jan 14 '21 at 14:28
  • 1
    IOS Safari does not support background-attachment fixed, see [link]https://caniuse.com/?search=background%20attachment – A Haworth Jan 14 '21 at 14:32

1 Answers1

0

martinho and A Haworth were correct. I used a media query for mobile view and set background-attachment: scroll which solved the problem, although lost parallax.

Seamus O'Hara
  • 483
  • 1
  • 4
  • 6