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));

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…