Pourquoi j'ai deux images supperposées ?

ObiJuanKenobi

14 Aug 2025 à 19:13

Bonjour à vous tous,

De retour parmi vous pour vous demander pourquoi le navigateur m'affiche deux images supperposées quand je suis en mode d'affichage smartphone ? C'est-à-dire que j'ai l'image en longueur que je veux afficher en mode écran de bureau, et par dessus l'image en hauteur que je veux afficher si je suis en mode d'affichage smartphone.

Voici le code :

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de la page</title>
    <style>
        @media (max-width: 36.01em) {
            .bloc{
                background: none;
                background-image: url("render-tree2.png");
            }
        }
    </style>
</head>

<body>
    <img src="render-tree.png" alt=" " class="bloc">
</body>

</html>

J'obtiens ce résultat uniquement en mode d'affichage smartphone :
upload/1755191573-62242-capturedancran2025-08-1419121.png

J'ai soumis le code à ChatGPT et celui-ci m'a suggéré d'ajouter background: none; pour forcer le navigateur à ne pas prendre en compte la version du schéma pour les écrans de bureau, mais cela ne fonctionne pas. Quelqu'un saurait m'expliquer pourquoi j'ai les deux images supperposées ?

Bonnes vacances à ceux qui sont encore en vacances,
et que le code soit avec vous !
Modifié par ObiJuanKenobi (14 Aug 2025 - 19:22)