1486 sujets

Web Mobile et responsive web design

Background et srcset

Bonjour à tous,
J'ai lu l'article concernant les images en responsive et la mise en forme avec srcset.
Je suis devant un problème d'image en arrière-plan qui occupe tout le header.
Pour pouvoir adapter cette image aux différentes tailles j'aurais aimé utiliser la ressource srcset, mais comment placer le code srcset dans ce genre de code avec background-image:url :

<div class="d-lg-none img-fluid" style="background-image: url('../img/carousel/bg_780.jpg'); background-repeat: no-repeat; background-size: cover;">


Je n'ai pas trouvé la solution, mais peut-être que l'un de vous saura me l'indiquer.

Merci pour votre aide et bonne soirée.
Sabaudia
Bonsoir,

Attention il ne faut pas confondre le mappage d'une div avec une image avec la propriété background-image et le placement d'une image via la balise img (ou picture) et ses attributs srcset. Visuellement on peut arriver au même résultat, mais le moyen employé n'est pas du tout le même, et sur le plan sémantique non plus (un élément de décoration dans le premier cas, un élément de contenu dans le deuxième cas).

Si vous optez pour une image vous pouvez vous inspirer de ceci : CodePen, Picture tag

Pour un élément de décoration employant background-image il faudra employer les media queries (mais pas inline du coup). Exemple :
@media screen and (max-width: 36.01rem) {
  #welcome {
    background-image: url(//monsite.fr/imageA-small.jpg);
  }
}
@media screen and (min-width: 36.01rem) and (max-width: 65.01rem) {
  #welcome {
    background-image: url(//monsite.fr/imageA-medium.jpg);
  }
}
@media screen and (min-width: 65.01rem) {
  #welcome {
    background-image: url(//monsite.fr/imageA.jpg);
  }
}
Modérateur
Bonjour,

Il existe un équivalent à srcset pour les background-image qui s'appelle image-set. Ça ne marchera sans doute pas avec tous les navigateurs (je n'ai pas vérifié en détail où ça en est actuellement).

En supposant que tu as une version "360" et une version "780" de ton image, dans ton css, tu peux essayer quelque chose du genre :

div.d-lg-none img-fluid {
  background-image: url('../img/carousel/bg_360.jpg');
  background-image: 
    -webkit-image-set(
      url('../img/carousel/bg_360.jpg') 1x,
      url('../img/carousel/bg_780.jpg') 2x
    );
  background-image: 
    image-set(
      url('../img/carousel/bg_360.jpg') 1x,
      url('../img/carousel/bg_780.jpg') 2x
    );
}


Normalement, ça devrait marcher au moins avec Chrome et peut-être avec Safari.

Amicalement,
Modifié par parsimonhi (19 Dec 2018 - 22:33)
Sujet clos
Aller à