Изображение не отображается на определенном мобильном телефоне

Question

На некоторых мобильных устройствах изображение в верхней части страницы не отображается.Логотип, с другой стороны, показывает.Разница заключается в изображении и фоновом изображении.Тот, который не отображается, является background-image.

У div есть высота, ширина и цвет фона.Поэтому, если фоновое изображение не работает, цвет должен быть видимым, но это не так.

Изображение не отображается на этом конкретном телефоне с настройками: Nokia 8.1 Chrome 74.0.3729.157 Android 9

Здесь вы можете найти экраны печати Nokia, поэтому нет изображения:

Iphone, с изображением:

Я изменил положение класса .background на относительное вместо статического.И delete-mix-blend-mode: multiply;

Но ничего не работает.Высота показа изображения, но это просто пустое место.

<div class="header">
    <a class="logo" href="/">
        <img src="/images/logo.png" alt="">
    </a>
    <div class="background">
        <div class="mas"></div>
    </div>
</div>

.header{
    position: relative;
    .logo{
        color: black;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 3.5em;
        letter-spacing: 5px;
        text-decoration: none;
        position: relative;
        z-index: 100;
        img{
            width: 120px;
            margin-bottom: 10px;
            margin-left: -22px;
        }
    }
    .background{
        position: relative;
        width: 100%;
        height: 300px;
        margin-top: 0;
        background: $baseColor;
        z-index: 50;
        .mas{
            width: 100%;
            height: 300px;
            margin-top: 40px;
            bottom: 0;
            top: auto;
            position: absolute;
            right: 0;
            background-image: url(/images/antwerpse_fluisteraar.jpg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            opacity: 0.8;
        }
    }
}

Answer 1

Попробуйте, надеюсь, вам это поможет

     .background{
        position: absolute;
        width: 100%;
        height: 300px;
        margin-top: 0;
        background: $baseColor;
        .mas{
            width: 100%;
            height: 300px;
            margin-top: 40px;
            position: relative;
            background-image: url(/images/antwerpse_fluisteraar.jpg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
           opacity: 0.8;
       }
   }