css – Body background and safe zone iOS causing issues on web page


Breaking my had on this frontend issue. On iOS captive portal opens a popup with our webpage. But for some reason, the background image stops just before the safe zone (where the swipe up bar is). I want the background image to take up all the space so there is no ugly white space.

Tried different approaches already, but none seems to work.

As you can see on the picture the background color fills up all the space, but the image doesnt.

 html,body {
        background-color: red;
        background-image: url('image.jpg');
        background-size: auto 100vh;
        background-attachment: scroll;
        background-repeat: no-repeat;

enter image description here