1448 sujets

Web Mobile et responsive web design

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