CSS et display: grid; - images qui ne s'affichent pas sous IE, Opera et Chrome

Bonjour,

J'utilise les grilles flex pour l'architecture de mon site. Mon problème est que les images de mon header ne s'affichent pas sous IE, Opera et Chrome alors que tout fonctionne sous FF. Je précise que je teste avec Microsoft Edge Canary Version 80.0.346.0, Opera Version 65.0.3467.48, Chrome Version 78.0.3904.108 et Firefox version 66.0.2. Je précise également que les liens de mes images sont renseignés dynamiquement avec PHP (peut-être un soucis de ce côté-là... sauf que ça fonctionne sous FF).

Ci-dessous le rendu sous FF, celui attendu :


Ci-dessous le rendu obtenu sous IE, Opera et Chrome :


Mon HTML :

<header>
	<div class="<?php echo $class_background ?>">
		<img src="<?php echo $folder_img ?>/<?php echo $file_background ?>" alt="" />
	</div>
	<div class="<?php echo $class_logo ?>">
		<img src="<?php echo $folder_img ?>/<?php echo $file_logo ?>" alt="Logo de l'entreprise <?php echo ucfirst($firstName_entreprise).ucfirst($lastName_entreprise); ?>" />
	</div>
	<div class="<?php echo $class_slogan ?>">
		Découvrez la Provence et les Alpes à moto avec <?php echo ucfirst($firstName_entreprise).ucfirst($lastName_entreprise); ?>
	</div>
</header>

Mon CSS :

header {
display: -ms-grid;
display: grid;
-ms-grid-columns: [column1] 1fr [column2] 4fr;
grid-template-columns: [column1] 1fr [column2] 4fr;
-ms-grid-rows: [row1] 85vh;
grid-template-rows: [row1] 85vh;
}

.background {
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-column: 1 / 3;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
grid-row: 1 / 2;
-ms-grid-column-align: stretch;
justify-self: stretch;
-ms-flex-item-align: end;
align-self: flex-end;
}

.background img { width: 100%; }

.logo {
-ms-grid-column: 1;
-ms-grid-column-span: 1;
grid-column: 1 / 2;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
grid-row: 1 / 2;
-ms-grid-column-align: start;
justify-self: start;
-ms-flex-item-align: end;
align-self: flex-end;
}

.logo img { border-radius: /* Top left */ 50% /* Top right */ 50% /* Bottom right */ 0 /* Bottom left */ 0; }

.slogan {
font-weight: bold;
color: white;
font-size: xx-large;
margin-right: 1em;
margin-bottom: 1em;
margin-left: 1em;
-ms-grid-column: 2;
-ms-grid-column-span: 1;
grid-column: 2 / 3;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
grid-row: 1 / 2;
-ms-grid-column-align: start;
justify-self: start;
-ms-flex-item-align: end;
align-self: flex-end;
}