Images qui ne s'affichent pas sous certains navigateurs.

Bonjour,

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 :


Ci-dessous ma page Index.php qui appelle mon header (j'ai juste mis la ligne qui appelle le fichier) :

<?php include($folder_parts.'/'.$file_header); ?>

Ci-dessous mon fichier Header.php :

<header>
	<div class="<?php echo $class_background; ?>">
		<img src="<?php echo $folder_img.'/'.$file_background; ?>" alt="" />
	</div>
	<div class="<?php echo $class_logo; ?>">
		<img src="<?php echo $folder_img.'/'.$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>

Ci-dessous mon CSS :

/* Header */
header {
	-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: stretch;
	justify-self: stretch;
	-ms-flex-item-align: start;
	-ms-grid-row-align: start;
	align-self: start;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: [column1] minmax(auto,12em) [column2] auto;
	grid-template-columns: [column1] minmax(auto,12em) [column2] auto;
	-ms-grid-rows: [row1] 85vh;
	grid-template-rows: [row1] 85vh;
}

/* Background container */
.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 */
.background img { width: 100%; }

/* Logo container */
.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 */
.logo img { border-radius: /* Top left */ 50% /* Top right */ 50% /* Bottom right */ 0 /* Bottom left */ 0; }

/* Slogan container */
.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;
}

Et au cas où, ci-dessous mes variables PHP :

$file_header = 'header.php';

$file_me = 'me.jpg';

$file_background = 'motorcycle.jpg';
$class_background = 'background';

$file_logo = 'logo.jpg';
$class_logo = 'logo';

$class_slogan = 'slogan';

Je ne vois vraiment pas d'où peut venir le problème...