1477 sujets

Web Mobile et responsive web design

[Résolut] Queries, remplacer image

Bonjour à tous et à toutes.
Dans mes media queries je voudrais remplacer une images par une autre.
Mais ça ne marche pas (firefox 38 linux), voici ce que j'ai fait :
html
<body class="body">		
		<header class="mainHeader">	     		
			<img class="banner" src="images/banmaison.jpg" alt="1"/>

css
@media all and (max-device-width: 564px)
.banner { 
    content: url("images/mobMaison.jpg");   
    width: 100%;
}

Dans l'inspecteur de FF la nouvelle image est reconnue sans erreur mais n'est pas affiché.
J'en appel à vos connaissances pour m'aider.
Merci d'avance
JP
Modifié par jpr (06 Jul 2015 - 09:30)
Si tu écris "content", ça change le CONTENU de .banner, pas le src de l'image.
Je pense que pour que ça marche il faudrait faire quelque chose comme 

.banner {background-image: url("images/banmaison.jpg");
               background-size: ......;
               background-repeat: no-repeat;
           }
@media all and (max-device-width: 564px)
    .banner { 
        background-image: url("images/mobMaison.jpg");
        background-size: ......;   
    }

Mais je n'ai pas testé.
Salut, et merci pour vos interventions.
background ne marche pas j'avais déjà essayé.
Je vais voir du coté de JS
Si je trouve une solution , j'avise.
a +
Modérateur
Suivant la méthode de PapyJP, l'image est affichée mais uniquement en arrière plan. C'est-à-dire qu'au premier plan est affichée l'image référencée par la balise img.

J'utilisais cette technique mais ici il manque un détail : le fake.

Ici, notre fake sera une image de 1px² de couleur transparente. Cette image est à référencer au sein de notre balise Img. Ainsi lorsqu'on fera intervenir la couche Css, le background apparaîtra par transparence.

Au niveau du code, voici ce que ça donne :

// Partie html
<header class="mainHeader">
 <img class="banner" src="url_de_mon-fake.png" />
</header>


// Partie Css
@media all and (max-device-width: 664px) {
.mainHeader .banner:first-child { background: url(image1_bis.jpg) no-repeat;}
.mainHeader .banner:nth-child(2) { background: url(image2_bis.jpg) no-repeat;}
}

@media all and (min-device-width: 665px) {
.mainHeader .banner:first-child { background: url(image1.jpg) no-repeat;} // Important: ne pas oublier l'espace entre la parenthèse fermante et l'attribut de répétition.
.mainHeader .banner:nth-child(2) { background: url(image2.jpg) no-repeat;}
}

Bien sûr il ne faut pas oublier de fixer le viewport et les éléments en background-size:clip (voirs articles sur Alsa).

Autrement pourquoi ne pas utiliser l'attribut SRCSET de la balise Img ?
Merci Greg, ça marche !
Effectivement avec l'img transparente ça fonctionne. Dans mes recherches j'avais vu qqchose comme ça, mais pas bien compris.
Maintenant c'est claire.
Merci
Administrateur
Bonjour,

Attention cependant à ce genre de techniques qui ont plusieurs inconvénients :
- elles ne sont pas accessibles (aucun contenu véhiculé aux assistances techniques)
- elles ne sont pas référencées (aucun contenu véhiculé à nos moteurs de recherches préférés)
- elles ne sont pas faites pour ça (une image de contenu doit être une "vraie" img ou picture, et non des background CSS).

Mais sinon, ça marche Smiley cligne
Sujet clos
Aller à