Background Not Fully Responsive While Checking On Chrome iPad Dev

Bootstrap Studio Help
1

Hi I'm currently working on a landing page and when I check it on Chromes dev tools under iPad and iPad Pro it doesn't fully respond? Any idea what could be wrong? I'd really appreciate any help!

enter image description here

enter image description here

2

I'd love to know this myself as I gave up trying quite some time ago on this. What I do now, in case you want an alternative, is set the background to fixed when it's on tablet and smaller screens. Hopefully someone will know how to work around this though.

3

I see no issue here:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>XXXXXXXXXXXXXXX</title>
    <meta name="description" content="XXXXXXXXX">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
</head>

<body>
    <div class="container-fluid d-flex flex-column" style="background-image: url(&quot;https://source.unsplash.com/gzcoF6TNrkg&quot;);background-size: cover;background-position: center;height: 100vh;padding: 0;">
        <div class="d-flex m-auto rounded" style="background-color: rgba(255,255,255,0.85);width: 40vw;height: 16vw;"><img src="assets/img/XXXXXXXXXXX.svg" width="100%" /></div>
        <footer class="d-flex mt-auto px-3" style="background-color: rgba(255,255,255,0.65);">
            <p>XXXXXXXXX • XXXXXXXXX • XXXXXXXX • XXXXXXX • XXXXXXXXX • XXXXXXXXX • XXXXXXXXXXXX • info@XXXXXXXXXX.com</p>
        </footer>
    </div>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>

</html>
4

@ericlavar I believe your background image should be on your body element and styled something like the following.

body {
    background-image: url(https://source.unsplash.com/gzcoF6TNrkg); // stole it from marrco :)
    background-norepeat: no-repeat;
    background-height: 100vh;
    background-size: cover;
}

Saj

5

@marrco & @saj

Thank you it worked!