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\/500x250-00b0b0.png"
        },
        {
            "min": 480,
            "max": 767,
            "url": "https:\/\/pictures.kortic.com\/800x400-00b0b0.png"
        },
        {
            "min": 768,
            "max": 1299,
            "url": "https:\/\/pictures.kortic.com\/800x500-00b0b0.png"
        },
        {
            "min": 1300,
            "max": 10000000,
            "url": "https:\/\/pictures.kortic.com\/1300x650-00b0b0.png"
        }
    ]'

    Code

    Nécessite jQuery

    ;(async ($) => {

        'use strict';

        $.fn.RWDbackgrounds = function(options_){

            var settings_ = $.extend({
                    'attribute': 'backgrounds',
                }, options_),

                attribute_    = settings_.attribute,
                background_    = null,
                window_w    = $(window).width();

            $(this).each(async 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);
    Si vous souhaitez participer, même modestement, au maintien du site et pour son usage, vous pouvez cliquer sur le joli bouton…

    Appel de la fonction

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

    <script>
    $(document).ready( function() {
            
        $('.rwdbg').RWDbackgrounds();
            
        // optionnel pour gérer la bascule sur tablette/mobile
        $(window).on('resize', function(){
            $('.rwdbg').RWDbackgrounds();
        });
    });
    </script>
    Soutenez Aquinum
    Voir aussi…
    • Vérifier un numéro de carte bancaire Vérification de carte bancaire, script de validation de carte bancaire. Contrôle de format de numéro de carte bancaire, algorithme de Luhn carte de crédit Visa, Mastercard, Maestro, CB, Carte Bancaire, Discover Card, American Express, JCB Cards
    • Owl Carousel multiple Gérer plusieurs carrousels/sliders sur une seule page avec Owl Carousel 2. Manage multiple carousels/sliders on one page with Owl Carousel 2
    • Conversion SVG/CSS Encodage SVG pour CSS compatible Sass et exemple d'intégration SVG via xlink compatible CSS. SVG encoder, base64 SVG pour CSS.
    • Optimisation SVG Intégration SVG via xlink/use/symbol, factorisation de symbol SVG
    • Responsive SVG Utilisation des media queries internes au SVG
    • LazyLoad Intersection Observer LazyLoad avec IntersectionObserver API pour images, picture, iframe, etc.
    • Design, flux et accessibilité jQuery Responsive layout logical DOM plugin
    • Lightbox Responsive et Accessible Lightbox images jQuery Responsive accessible a11y. Automatisation d'une Lightbox multipages. Lightbox image unique ou multiple. Lightbox responsive et accessible a11y wcag
    • Tooltip (infobulle) a11y Tooltip (infobulle) compatible a11y et SEO, naviguable au clavier, accessible par lecteur d'écran
    • Zipcode patterns Contrôle automatisé de codes postaux internationaux
    • Responsive background-image jQuery responsive background-image plugin
    • Drapeaux ISO 3366 SVG Drapeaux nationaux vectoriels normés ISO alpha 2, alpha 3 et numérotation Organisation des Nations Unies (ONU). SVG drapeaux pour internationalisation de sites multilingues.
    • Layout rigolo Une autre approche pour définir un layout de page responsive.
    • Générateur de noms API de génération de couples prénom/nom aléatoires.
    2020-07-12