bgset doesn't support additional background-image values (e.g. linear-gradient)

[davejtoews]

Using the bgset plugin I'd like to be able to lazyload a background image, with a linear-gradient overlay. But the background-image attribute just gets overwritten with a url, rather than what I'd like at the end of the day:

style="background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(https://path/to/image.jpg)"

I can put that as the initial value, but bgset overwrites it without the linear-gradient, resulting in:

style="background-image: url(https://path/to/image.jpg)"

I'll look for my own solution using js api events, but it would be nice to have a built in solution.

[davejtoews]

I've fixed this on my own project by using a customized version of ls.bgset.js. Specifically I've modified the proxyLoad function:

var proxyLoad = function (e) {
    if (!e.target._lazybgset) { return; }

    var image = e.target;
    var elem = image._lazybgset;
    var bg = image.currentSrc || image.src;
    var prefix = elem.getAttribute('data-bgprefix'); // Gets prefix string

    if (bg) {
        var event = lazySizes.fire(elem, 'bgsetproxy', {
            src: bg,
            useSrc: regBgUrlEscape.test(bg) ? JSON.stringify(bg) : bg,
        });

        if (!event.defaultPrevented) {
            elem.style.backgroundImage = prefix + 'url(' + event.detail.useSrc + ')'; // puts prefix string before url
        }
    }

    if (image._lazybgsetLoading) {
        lazySizes.fire(elem, '_lazyloaded', {}, false, true);
        delete image._lazybgsetLoading;
    }
};

My element with the background now includes

data-bgprefix="linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), "

I'd be willing to submit this as a PR, but my guess is this is not a robust enough solution. The spec for the background-image attribute allows for multiple comma separated images, whether they be urls or various other things, such as a gradient. There is potentially a use case here for multiple lazyloaded URLs, which my solution doesn't support.