Kortic, Anthony Ladeuil

`background-image` responsive

Exemple

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

Container avec attribut data-backgrounds='[ { "min": 0, "max": 479, "url": "\/\/pictures.kortic.com\/500x250\/ff8800" }, { "min": 480, "max": 767, "url": "\/\/pictures.kortic.com\/800x400\/ff0033" }, { "min": 768, "max": 1299, "url": "\/\/pictures.kortic.com\/1000x500\/ffddee" }, { "min": 1300, "max": 10000000, "url": "\/\/pictures.kortic.com\/1300x650\/ff8800" } ]'

Code

Nécessite jQuery

;(function($){

    '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_ + ')'
            });

            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… ou scanner le QR code.
Un petit sou avec
QR CODE Paypal

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>
        
Voir aussi…
2019-07-17