Foto's worden niet goed getoond mobiel

Hallo,

Ik gebruik voor de header een background image en deze style ik in de CSS op de volgende manier:

.header-image {
background-size: cover;
background-repeat: no-repeat;
height: 850px;
width: 100%;
background-position: 50%;
background-attachment: fixed;
}

En in de HTML:
<div class="header-image" style="background-image: url(<?php echo get_template_directory_uri().'/images/concert.jpg' ?>)"></div>

Als ik de header in Chrome test op een desktop met de iPhone 6/7/8 functie aan, krijg ik dit te zien:


En als ik hem test op een iPhone 6/7/8 krijg ik dit te zien:


Hoe krijg ik het opgelost dat hij op een iPhone 6/7/8 netjes wordt getoond, en niet een zwart vlak?