Responsive background image

createResponsiveBgImages.js

import Viewport from './viewport';
import $ from 'jquery';

export default function createResponsiveBgImages() {
    const viewport = new Viewport();

    $('[data-image]').each((idx, el) => {
        let images = {};
        let data = $(el).data();

        Object.keys(data).forEach((key) => {
            let match = key.match(/image(.*)/);
            if (match) {
                let size = match[1].toLowerCase();
                images[size] = data[match[0]];
            }
        });

        viewport.on('change', () => {
            if (viewport.inSize(Object.keys(images))) {
                $(el).css('background-image', `url(${images[viewport.size]})`);
            } else {
                $(el).css('background-image', `url(${data.image})`);
            }
        });

        viewport.handleResize();
    });
}

Example markup

<div data-image="default.jpg" data-image-small="small.jpg" data-image-large="large.jpg" />