Image not showing on specific mobile phone - html

Question

On some mobile devices the image on the top of the page is nog showing. The logo, on the other hand, is showing. The difference is an image and background-image. The one not showing up is the background-image.
The div has a height and width and a background color. So if the background-image isn't working, the color should be visible but it isn't.
The image is not showing on this specific phone with settings:
Nokia 8.1
Chrome 74.0.3729.157
Android 9
Here you can find print-screens
Nokia, so no picture:
Iphone, with picture:
I've changed the position of the class .background to relative instead of static. And deleter mix-blend-mode: multiply;
But nothing is working. The height of the image show, but it is just an empty space.
<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

Try this I hope it will help you
.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;
}
}