28222 sujets

CSS et mise en forme, CSS3

Pourquoi j'ai deux images supperposées ?

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)
Hello

tu appliques un background-image à une image... c'est pas bon

Si tu as 2 images différentes, une pour desktop et une pour mobile, tu déclares tes 2 images, et tu joues avec ton media query pour les afficher ou pas.
Et pour ton unité en em dans ton media query, je ne suis pas certain que ce soit très adapté, mais pourquoi pas...


<img class="img--desktop" src="render-tree.png" alt="" />
<img class="img--mobile" src="render-tree2.png" alt="" />

.img--mobile {
     display: none;
}
@media (max-width: 768px) {
     .img--desktop {
         display: none;
    }    
     .img--mobile {
         display: block;
    }    
}


ou pour aller plus loin tu peux le faire directement dans ton html :


<picture>
    <source srcset="render-tree.png" media="(min-width:768px)" />
    <source srcset="render-tree2.png"  />
    <img src="render-tree.png" alt="" />
</picture>
J'ai trouvé une autre solution :
.bloc{
    content: url('render-tree2.png');
  }

En principe, la propriété CSS content s'utilise avec les pseudo-éléments ::before et ::after pour insérer du contenu généré en CSS. Cette propriété permet d'ajouter du texte ou d'autres types de contenu (comme des images) à un document sans avoir à modifier le HTML. Mais sans l'utilisation d'une des pseudo-classes, ça fonctionne.
Modifié par ObiJuanKenobi (15 Aug 2025 - 08:21)
salut
ou comme çà


<!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>
.divdufond {
background-image: url(imageHoriz.webp);
width: 100vw;
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
overflow: hidden;
}

@media screen and (orientation: portrait) {
.divdufond {
background-image: url(imageVertic.webp);
}
</style>
</head>
<body>


<div class="divdufond"></div>


</body>
</html>
Finalement, ma solution avec la propriété content n'est pas bonne, même si elle fonctionne, parce que cette propriété sur la balise <img> n'est pas fiable étant donnée qu'elle n'est pas uniformément implémenté par tous les navigateurs. J'opte donc pour la solution de Pedrothelion avec <picture> et <source>.

Voici mon code final qui fonctionne bien, sans CSS, seulement du HTML :

<div class="centrer">
    <picture>
        <source srcset="../img/render-tree2.png" media="(max-width: 36.01em)">
        <img src="../img/render-tree.png" alt="Schéma de la génération de l'arbre de rendu (render tree)" class="bloc4">
    </picture>
</div>

Par contre, la solution de drphilgood est bien compliqué et je ne l'ai pas testée. De plus, je ne connais pas le format ".webp", je ne l'ai jamais vu. Qu'est-ce que c'est comme format ? Il est nouveau ?
Modifié par ObiJuanKenobi (15 Aug 2025 - 10:16)
le webp est nouveau depuis 10 ans et supporté partout
mais jpg marche aussi dans cet exemple

ma soluce est simple;
une image pour écran vertical
et un autre pour écran horizontal
Modérateur
Hello,

ObiJuanKenobi a écrit :


J'ai soumis le code à ChatGPT et celui-ci m'a suggéré d'ajouter background: none;


Voilà le résultat d'une belle bêtise de l'IA..... Smiley biggol

Toujours le fond et la forme....
Ton image montre une hiérarchie avec du texte. Donc, tu dois expliquer le contenu. À une époque, il y avait l'attribut longdesc. Cet attribut était prévu pour ce type d'image. Tu décrivais son contenu. longdesc est déprécié depuis un moment maintenant. Beaucoup faisaient la confusion entre alt et longdesc. Beaucoup pensaient que la valeur de l'attribut alt avait un nombre maximum de caractères. Or c'est totalement faux.

Tu codes une image en jpg ou webp ou png ou gif ou etc. Si tu n'as pas le choix, c'est une solution. Voici un exemple classique afin d'expliquer une image qui représente une hiérarchie d'entreprise. 


<h2>Structure de l'organisation</h2>
<img src="hierarchie.png" alt="Diagramme de la structure de l'entreprise" aria-describedby="detail-description">

<p id="detail-description">Ce diagramme montre le président, qui supervise les trois vice-présidents des départements Marketing, Ventes et Production. Chaque département est subdivisé en équipes.</p>


Or, pour ce genre de choses, un SVG est nettement plus adéquate. Pourquoi ?

1. Le texte est en clair dans le DOM
2. C'est une image "simple". Le poids devrait être sensiblement plus léger.
3. c'est du vectoriel. Donc, tu n'auras pas de perte de qualité
4. c'est un DOM à part entier. Ce qui veut dire que tu peux avoir une sémantique impeccable (title, defs).

Tu ne sais pas encore développer en SVG ? Inkscape Smiley luvlove ou même Illustrator peuvent t'aider. Il faudra tout de même éditer le fichier dans ton éditeur de texte afin d'améliorer le contenu. Raphael m'avait parlé d'un logiciel une fois. Je ne me souviens plus de son nom.
Modifié par Niuxe (15 Aug 2025 - 15:28)
Niuxe, quel rapport entre ton post et le fait que j'ai deux images supperposés en utilisant <img> et background-image ?

De plus, ChatGPT n'est pas aussi bête que tu le prétends. S'il ma suggéré d'utiliser la propriété background: none;, c'était dans l'éventualité où j'aurai déjà utilisé cette propriété dans le CSS pour une autre balise, auquel cas il pourrait y avoir conflit. Quand je lui ai fait remarquer que le problème n'était pas résolu, il m'a alors proposé d'ajouter !important au deux propriétés. Résultat, toujours deux images supperposées. Enfin, son explication finale est que soit cela venait d’un conflit de sélecteurs, ou d’un media query qui ne remplace pas la bonne règle, soit j'ai une autre règle CSS qui définit aussi un background-image sur un autre élément mais qui n'annule ou ne remplace pas la première correctement, alors les deux images peuvent se superposer.

C'est très facile de critiquer et de dire que l'IA est bête mais je trouve que ChatGPT m'aide énormément à progresser dans mon apprentissage du HTML et CSS. Chaque fois que j'ai un doute sur une sujet précis, je ne me prive pas de lui demander des explications et en général il tombe juste. Pour finir, ChatGPT m'a également proposé la même méthode que Pedrothelion, c'est-à-dire utiliser <picture>, <source> et <img> en précisant que c'était la méthode optimale pour afficher une image différente sur écran de bureau ou sur smartphone.

A propos du format WebP, j'ai fait des recherches. Il a été créé par Google le 30 novembre 2010 https://fr.wikipedia.org/wiki/WebP Son principal atout c'est des images fixes plus légères que JPEG ou PNG, tout en conservant une qualité visuelle similaire. Il prend en charge la transparence (comme le format PNG) et ajoute des animations (remplaçant avantageusement le format GIF). Et il est massivement adopté par Chrome, Firefox, Edge, puis Safari depuis 2021.

J'ai regardé les formats proposés par Photoshop, pour l'optimisation des images pour le web, il y a JPEG, PNG, GIF et WBMP (images bitmap monochromes). Il ne propose pas le format WebP. Pour bénéficier de ce format sur Photoshop, il ne faut pas passer par l'interface de Photoshop pour l'optimisation des images pour le web mais par "Enregistrer sous...".

Je ne connaissais pas ce format, je vais dorénavant l'utiliser parce qu'il génère des images plus légères que les formats JPEG et PNG tout en gardant la transparence et une éventuelle animation.
Modifié par ObiJuanKenobi (15 Aug 2025 - 16:05)
Modérateur
Bonjour,

ObiJuanKenobi a écrit :
Niuxe, quel rapport entre ton post et le fait que j'ai deux images supperposés en utilisant &lt;img&gt; et background-image ?

En fait ton code :
ObiJuanKenobi a écrit :

.bloc{
background: none;
background-image: url("render-tree2.png");
}

Continuera d'afficher une image de fond, ce sera la seule valeur passée à background.

ObiJuanKenobi a écrit :

De plus, ChatGPT n'est pas aussi bête que tu le prétends.


Là, tu ne sait apparemment pas comment fonctionne une IA .
Grosso modo :
1. L'IA ne comprend pas ce que tu écris
2. L'IA ne comprend pas non plus ce qu'elle renvoi

Le terme Intelligence dans Artificial Intelligence(en) ne se traduit pas par "intelligence" mais se réfère à l'Information.

Informations glanées depuis Internet sans aucun discernement et rendu sans réflexions ni discernement. Au mieux, si la réponse est relativement bonne et pas trop biaisé, elle est probablement déjà obsolète.

A utiliser avec modération, précaution et discernement donc Smiley smile
Modérateur
gcyrillus a écrit :
A utiliser avec modération, précaution et discernement donc Smiley smile


+1

@ObiJuanKenobi : Ton image raconte quelque chose. Ton image a une réelle signification. Ce n'est pas une décoration de la charte graphique de ton site/application/projet. Donc, background est à proscrire. L'IA t'a proposé une mauvaise méthode.

Niuxe a écrit :

Toujours le fond et la forme....


Si j'ai écrit ceci, ce n'est pas par hasard. Plus bas dans ma réponse, je t'indique la meilleure manière pour rendre ton image.
edit: Je viens de vérifier autre chose. Dia permet de faire des exports en SVG également.

l'IA est un assistant utile.
Mais se reposer seulement sur ça, ce sera le mur. L'équivalent d'un copier/coller stackoverflow++ sans comprendre ce que l'on fait et sans comprendre les répercussions. J'ai lu que 80% des responsables informatique ont eu des conséquences négative avec l'IA (fuite de données, résultats erronés, failles de sécurité, etc.) ¹. Tout ça parce qu'on a laissé l'IA halluciner.

Moi même, je me sers de l'IA. Mais je fais attention à ce que je fais. Souvent, j'ai remarqué qu'elle me sort des bêtises. Je dois constamment la remettre dans le droit chemin. La dernière fois, je lui donne un DOM. Dans sa réponse, elle m'avait remplacé le DOM (médiocre) et ce qu'elle proposait ne fonctionnait même pas. Je dois constamment réadapter.

Autre anecdote : je lui demande des infos sur un concept bien poussé. Elle m'a sorti des liens Hello world 404 ! J'ai dû faire des recherches par moi-même pour arriver à mes fins.

L'IA aide à l'apprentissage. C'est un fait. Dernièrement, j'ai appris par l'IA, l'éxistence de duckdb. C'est une librairie dans laquelle, on peut faire du SQL à partir d'un json ou d'un csv. Au passage, le portage en php, c'est une blague. Finalement, j'ai utilisé pandas. Pour mon apprentissage de Pandas, j'ai demandé et je demande quelques précisions. Mais j'apprends à partir de la doc officielle, livres et autres sources plus fiables.
______
¹ 80 % des responsables informatiques affirment que leur organisation a subi des conséquences négatives liées à l'utilisation de l'IA générative par leurs employés
Modifié par Niuxe (15 Aug 2025 - 20:30)
Prévenir un modérateur
Répondre au sujet
Aller à