div background image and iOS Mobile Safari compatibility issues

Question

I have a single '.home' div with a background image, that I want to fit vertically inside the said div. It works perfectly on mobile, except for iPhone browsing with Mobile Safari.

HTML code:

<div id="home" class="home">  <!-- This div has a background image -->
    <div class="overlay sections">
        <div class="container text-center">
            <div class="row">
                <div class="div-menu">
                    <header class="cd-header">
                        <div id="cd-logo">
                            <a href="index.html"><img id="logo-animated" src="assets/images/logos/vera_sing_logo.png" alt="Logo"></a>
                        </div>
                        <a class="cd-menu-trigger" href="#main-nav"><span></span></a>
                    </header>
                </div>
            </div>
        </div>
    </div>
</div>

This is the CSS:

    .home{
        background: url(../images/horizontal/home.jpg) no-repeat center top fixed;
        background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        width: 100%;
        overflow: hidden;
    }

I have an open repository, so you can check the website (and source code) live here: https://fieel.github.io/VeraSings/

If you happen to open it with Mobile Safari, you'll see only the top-left corner of the image, which is obviously not correct. This is correct, browsing with my Android device using Mobile Chrome:

What's causing the compatibility issue? What's the part of my CSS that breaks stuff on Mobile Safari?

iphone and ipad have problem with `background-attachment: fixed` sir — GerryofTrivia, Dec 29 '17 at 12:58
Thank you so much! This may look silly but i couldn't figure it out alone. Any way to know beforehand possible future compatibility issues? — Filipe Madureira, Dec 29 '17 at 16:23

score 0 · Accepted Answer · answered Dec 29 '17 at 12:57

0

because data-attachment : fixed didnt really work. Take a look for a while https://codepen.io/gentlemedia/pen/JJEzwO

answered Dec 29 '17 at 12:57

GerryofTrivia

420
4
20

What's the best way to deal with it? How to fix the background images if i can't use the data-attachment property? I can see in your snippet how you used a wrapper, that's the best way to deal with this? – Filipe Madureira Dec 29 '17 at 16:22
i think thats the best way. heres some explanation for that from other https://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios – GerryofTrivia Jan 02 '18 at 03:35

div background image and iOS Mobile Safari compatibility issues

1 Answers1