Pourquoi "background-image" ne fonctionne pas et "content" si ?

Bonjour à vous tous,

Je souhaite changer d'image quand je suis en affichage smartphone (passer d'une image large à une image étroite si l'écran est plus petit). J'ai cette ligne de code HTML :

<img src="image-large.jpg" alt="Capture-écran" class="image">

et cette déclaration CSS :

@media screen and (max-width: 767px) {
  .image {
    background-image: url('image-small.jpg');
  }

cela ne fonctionne pas, c'est-à-dire qu'en mode affichage smartphone, l'image ne change pas.

Par contre, si j'utilise cette propriété :

@media screen and (max-width: 767px) {
  .image {
    content: url('image-small.jpg');
  }

là ça marche.

Quelqu'un saurait m'expliquer pourquoi ?

Cordialement
Modifié par ObiJuanKenobi (01 Nov 2023 - 08:50)

Salut,

Une image n'est pas un élément HTML ordinaire, elle fait partie de ce que l'on appelle des "éléments remplacés" (les éléments de formulaire, les éléments audio et video en font aussi parti). Elle ne se comporte donc pas comme un élément HTML lambda, c'est pourquoi certaines propriétés CSS ne fonctionnent pas sur elle.

Dans certains cas ont ne peut pratiquement pas styler l'élément en question, par exemple les lecteur HTML5, c'est pourquoi au printemps sur ce forum j'étais beaucoup intervenu pour demander des conseils pour la fabrication d'un media player HTML5 maison en remplacement de l'original.
Modifié par Olivier C (01 Nov 2023 - 10:51)

Bonjour,

1. ton image est du HTML.
2. Ton image de fond est en CSS, derrière le contenu HTML. À aucun moment le contenu HTML n'est modifié.

3. La propriété content génère (en CSS) du contenu HTML. Mmh pas sûr que cela fonctionne sur tous les navigateurs car tu cibles l'élément (et img est un élément auto-remplacé, un cas bien particulier) et non un pseudo-élément (les ::before et ::after) d'un élément bien classique comme p ou div.
Avec le temps (et les navigateurs depuis longtemps disparus), j'ai appris à n'utiliser que des trucs comme p::after { content: image-de-deco.jpg } donc je ne pourrais pas te dire ce que c'est censé faire et ce que ça fait sur tous les navigateurs... J'évite !

Pour voir que ton image de fond est bien là, il faudrait - pour le test - ajouter opacity sur le contenu ou avoir une image HTML avec pas mal de transparence(s).

Pour réaliser ce que tu cherches à faire, 2 solutions AMHA :
* une image de fond avec effet via CSS background-size (MDN) edit: contain et cover
* l'élément picture avec plusieurs <source> selon la résolution (et l'orientation portrait / landscape càd paysage du smartphone !) edit: et en plus background-size, c'est complémentaire.

L'article Responsive Webdesign – présent et futur de l’adaptation mobile commence par aborder les images, pour aller plus loin.
Modifié par Felipe (01 Nov 2023 - 10:59)

Bonjour,

La propriété css background-image affiche une image en dessous d'un élément html. Si l'image initiale spécifiée dans l'attribut src d'un élément <img> n'est pas transparente, on ne voit évidemment pas ce qui est en dessous.

La propriété css content remplace le contenu d'un élément html. C'est pour ça qu'on voit le changement dans ce cas contrairement au cas où on utilise la propriété css background-image.

Amicalement,

Merci pour vos réponses mais je ne comprends pas bien quand vous dites qu'une image n'est pas un élément HTML comme les autres. Vous faites allusion au fait que c'est un objet importé ?

parsimonhi a écrit :
Bonjour,

La propriété css background-image affiche une image en dessous d'un élément html. Si l'image initiale spécifiée dans l'attribut src d'un élément &lt;img&gt; n'est pas transparente, on ne voit évidemment pas ce qui est en dessous.,

Ok, j'ai bien compris cette explication et c'est certainement la raison pour laquelle je ne voyais pas la version "small", parce qu'elle était cachée par la version "large" étant donnée que celle-ci se trouvait au premier plan.
Modifié par ObiJuanKenobi (02 Nov 2023 - 06:56)

ObiJuanKenobi a écrit :
Merci pour vos réponses mais je ne comprends pas bien quand vous dites qu'une image n'est pas un élément HTML comme les autres. Vous faites allusion au fait que c'est un objet importé ?

Voir l'explication ici : MDN, les éléments remplacés.

Lis bien tout le document, en effet il aborde aussi l'interaction de la propreté CSS "content" avec ces éléments spécifiques.

J'ai l'habitude des éléments remplacés (autres que les images je veux dire), c'est ma marotte de les styler. Un professionnel ne le ferait pas car il aurait le souci de critères de rétrocompatibilité plus étendus que moi. Par jeux je me suis amusé à styler des éléments natifs tels que l'input range, et plus récemment la balise progress (mieux supportée désormais). Je peux te dire que pour arriver à mes fins je me suis bien amusé. Ah j'en ai appris des trucs ! C'est sûr que c'est autre chose que de styler de simples divs...
Modifié par Olivier C (02 Nov 2023 - 10:29)

Merci Olivier pour ton lien MDN, je comprends mieux maintenant cette histoire d'éléments remplacés comme les images, les vidéos ou les sons qui ne peuvent pas être modifiés au moyens des propriétés CSS.

Oui. Pour les vidéos ou audios, ce ne sont pas les sons mais les petits players HTML5 dont je parlais.

OK mais on ne peux pas non plus modifier les vidéos et les sons comme on ne peut pas modifier les codecs des lecteurs.
Modifié par ObiJuanKenobi (02 Nov 2023 - 13:35)