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(opts){

        var settings = $.extend({
                'attribute': 'backgrounds',
            }, opts),

            this_ = $(this),
            attribute_ = settings.attribute,
            background_ = null,
            w = $(window).width();

        $(this).each(function() {

            let element_ = $(this),
                values = $.parseJSON(element_.attr('data-' + attribute_));

            for(let i in values) {

                if(w >= values[i].min && w <= values[i].max) {
                    background_ = values[i].url;
                    break;
                }

            }

            element_.css({
                'background-image': 'url(' + background_ + ')'
            });

            return this;
        });

    };

}(jQuery));

Appel de la fontion

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…
version de la page au 20/01/2019 à 23:03