Hello I have a problem with my background-image
on Apple devices (iPhone/iPad) My background looks like I want in all the browsers and on Android devices just not on Apple devices
like this in browsers: Safari, Firefox, Chrome, Opera, Edge, IE
like this on Android
and like this on Apple devices
for the HTML it is only a normal <div class="hero"> </div>
this is my CSS (sass)
.hero
width: 100%
height: 100%
position: relative
background:
image: url(../image/pics/thailand.jpg)
position: center
size: cover
attachment: fixed
I tried already some solutions from "Questions that may already have my answer" but nothing worked for me
Thank you for your help!!!!
I tried a lot solutions and I did not want to use JS so for some reason the property attachment fixed does not work correctly on IOS so I did this for media and now the picture look good it is just not fixed anymore
@media screen and(max-width:800px)
.hero
background:
attachment: scroll
If somebody brings me an other solution that would make me happy
thank you