DanyCode DanyCode - 1 year ago 92
iOS Question

Background-image not working on iPhone/iPad

Hello I have a problem with my

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

Firefox,Chrome, Opera, Safari, Edge, IE

like this on Android

Samsung, LG, Sony

and like this on Apple devices

iPhone, iPad

for the HTML it is only a normal
<div class="hero"> </div>

this is my CSS (sass)

width: 100%
height: 100%
position: relative
image: url(../image/pics/thailand.jpg)
position: center
size: cover
attachment: fixed

This is the page

I tried already some solutions from "Questions that may already have my answer" but nothing worked for me

Thank you for your help!!!!

Answer Source

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)
            attachment: scroll

If somebody brings me an other solution that would make me happy

thank you

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download