CODEWITHSUNDEEP
htmlcss
stylma
stylma

Reputation: 13

Safari Mobile - Problem with background image

I have a problem with my website after deploy. On mobile version of Safari, the background image renders very badly, looks like 144p. I checked the website on Android - Google Chrome, Firefox and Opera - and the website is working fine.

Does anyone know the solution?

.driver {
    height: 100vh;
    background-image: url("/assets/img/unrevied/brooke-lark-pGM4sjt_BdQ-unsplash.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px 20px;

    @include overlay(#000, 0.2);

    @media (max-width: width 1000px) {
        background-position: left center;
    }
}

Upvotes: 1

Views: 333

Answers (1)

A Haworth
A Haworth

Reputation: 36636

background-attachment: fixed;

is not supported on Safari IOS.

See https://caniuse.com/?search=background-attachment You may have to do something like show the background-image with size cover.

Upvotes: 1

Related Questions