title: Image not showing on specific mobile phone
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>The image is not showing on this specific phone with settings:
  Nokia 8.1
  Chrome 74.0.3729.157
  Android 9</p>
  
  <p>Here you can find print-screens
  Nokia, so no picture: </p>
  
  <p><a href="https://i.stack.imgur.com/jBWUy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jBWUy.png" alt="https://ibb.co/xjTW6J8"></a></p>
  
  <p>Iphone, with picture: </p>
  
  <p><a href="https://i.stack.imgur.com/JJqua.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JJqua.jpg" alt="enter image description here"></a></p>
  
  <p>I've changed the position of the class .background to relative instead of static. And deleter mix-blend-mode: multiply;</p>
  
  <p>But nothing is working. The height of the image show, but it is just an empty space.</p>
  
  <pre><code>&lt;div class="header"&gt;
      &lt;a class="logo" href="/"&gt;
          &lt;img src="/images/logo.png" alt=""&gt;
      &lt;/a&gt;
      &lt;div class="background"&gt;
          &lt;div class="mas"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  .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;
          }
      }
  }
  </code></pre>