Vous êtes dans la zone de contenu principal de la page

Responsive background-image

La conception Responsive impose des contraintes de performance et d'adaptation selon le terminal utilisé. Pour les images en ligne classiques, l'utilsation de balises picture figure et les attributs ad hoc de gestion de sources selon les viewports gèrent facilement cette nécessité.

Concernant les images gérées en arrière plan, il devient plus compliqué de fournir des formats adaptés à la taille d'affichage et à la qualité de la bande passante. Il n'est pas rare de distribuer des images de très grandes dimensions dans des zones réduites, notamment en mobile.

Un petit script va résoudre ce souci et améliorer l'expérience utilisateur au passage.

Exemple

Redimensionner le navigateur pour appliquer le changement d'image de fond

Container avec attribut data-backgrounds='[
 {
 "min": 0,
 "max": 479,
 "url": "https:\/\/pictures.kortic.com\/500\/250\/00b0b0.png"
 },
 {
 "min": 480,
 "max": 767,
 "url": "https:\/\/pictures.kortic.com\/800\/400\/00b0b0.png"
 },
 {
 "min": 768,
 "max": 1299,
 "url": "https:\/\/pictures.kortic.com\/800\/500\/00b0b0.png"
 },
 {
 "min": 1300,
 "max": 10000000,
 "url": "https:\/\/pictures.kortic.com\/1300\/650\/00b0b0.png"
 }
]'

Code

Nécessite jQuery

/****
 * Copyright (c) 2006 2020. Kortic - Anthony Ladeuil. Source kortic.com
 * licence Creative Commons CC BY-NC-SA 4.0 : Attribution - Pas d'utilsation commerciale - Partage dans les mêmes conditions
 * https://creativecommons.org/licenses/by-nc-sa/4.0/deed.fr
 ****/
 
 ;( (__) => {
  'use strict';
  __.fn.RWDbackgrounds = function(options_){
    var settings_ = __.extend({
        'attribute': 'backgrounds',
      }, options_),
      attribute_  = settings_.attribute,
      background_  = null,
      window_w  = __(window).width();
    __(this).each( function() {
      let element_ = __(this),
        values_ = __.parseJSON(element_.attr('data-' + attribute_));
      for(let i in values_) {
        if(window_w >= values_[i].min && window_w <= values_[i].max) {
          background_ = values_[i].url;
          break;
        }
      }
      element_.css({
        'background-image': 'url(' + background_ + ')'
      }).addClass('background-loaded');
      return this;
    });
  };
})(jQuery);

Appel de la fonction

Redimensionner le navigateur pour appliquer le changement d'image de fond

<script>
$(document).ready( () => {
    
  $('.rwdbg').RWDbackgrounds();
    
  // optionnel pour gérer la bascule sur tablette/mobile
  $(window).on('resize', () => {
    $('.rwdbg').RWDbackgrounds();
  });
});
</script>

Utilisation des sources

Les sources de « Responsive background-image » proposées par Kortic sont mises à disposition selon les termes de la licence Creative Commons CC BY-NC-SA 4.0 (licence Creative Commons CC BY-NC-SA 4.0 : Attribution - Pas d'utilsation commerciale - Partage dans les mêmes conditions).

Si vous souhaitez participer, même modestement, au maintien du site et pour son usage, vous pouvez cliquer sur le joli bouton…

Un petit sou avec ™