Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Feature Request: data-background-image responsive images with data-srcset

See original GitHub issue

Currently I use various media queries to include a different background image as needed, and being able to apply lozad to achieve the same result would be great 😃.

I wish you could define various background images per screen size in the same way you can for responsive images:

<!-- background image example -->
<div class="lozad" data-background-image="image.png" data-srcset="image.png 1000w, image-2x.png 2000w">

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:17
  • Comments:9 (2 by maintainers)

github_iconTop GitHub Comments

darrenjacobycommented, Aug 10, 2018

I also needed this, so got a version of it working.

I can now pass in data-background-image-md, data-background-image-lg, etc, depending on breakpoint values that I define in the JS.

You need to re-write load from the original, the only thing changing here is this section;

if (item.getAttribute('data-background-image')) {


If there is a better way to overwrite something in the existing load() function that would be helpful.

The rest remains as is, full example below;

const isIE = typeof document !== 'undefined' && document.documentMode

// breakpoints for backgrounds
let breakpoints = [
    src: 'sm',
    width: 576,
    src: 'md',
    width: 768,
    src: 'lg',
    width: 992,
    src: 'xl',
    width: 1200,
    src: 'xx',
    width: 1400,

// get screen size
let screen = document.documentElement.clientWidth;

// observer
let observer = lozad(el, {
  load: (item) => {
    // picture
    if (element.nodeName.toLowerCase() === 'picture') {
      const img = document.createElement('img')
      if (isIE && element.getAttribute('data-iesrc')) {
        img.src = element.getAttribute('data-iesrc')
      if (element.getAttribute('data-alt')) {
        img.alt = element.getAttribute('data-alt')

    // data-src
    if (item.getAttribute('data-src')) {
      item.src = item.getAttribute('data-src');

    // data-srcset
    if (item.getAttribute('data-srcset')) {
      item.srcset = item.getAttribute('data-srcset');

    // data-background-image
    if (item.getAttribute('data-background-image')) {

      // return a breakpoint that qualifies
      let breakpoint = breakpoints
        .filter(function(breakpoint) {
          // return if item is larger than screen width
          // return if data-background-image for the breakpoint exists
          if (screen >= breakpoint.width && item.getAttribute(`data-background-image-${breakpoint.src}`)) {
            return (breakpoint.src);
        // get the last item

      // default data-background-image
      let attr = item.getAttribute('data-background-image');

      // if a breakpoint qualified, then change the attr
      if (breakpoint) {
        attr = item.getAttribute(`data-background-image-${breakpoint.src}`);

      // set the background-image css prop = `url(${attr})`;

    // data-toggle-class
    if (item.getAttribute('data-toggle-class')) {
  loaded: (item) => {

// run
ApoorvSaxenacommented, Apr 16, 2018

we can document custom loading function to implement this behaviour to start with

Read more comments on GitHub >

github_iconTop Results From Across the Web

Responsive images - Learn web development | MDN
Objective: Learn how to use features like srcset and the <picture> element to implement responsive image solutions on websites.
Read more >
Lozad.js - Apoorv Saxena
Highly performant, light ~1kb and configurable lazy loader in pure JS with no dependencies for responsive images, iframes and more.
Read more >
A Guide to the Responsive Images Syntax in HTML - CSS-Tricks
This guide is about the HTML syntax for responsive images (and a little bit of CSS for good measure). We'll go over srcset...
Read more >
Lozad NPM |
allows lazy loading of dynamically added elements as well,; supports <img>, <picture>, iframes, videos, audios, responsive images, background images and ...
Read more >
Responsive Images - A Reference Guide from A to Z
High-resolution displays have a higher pixel density. This means more pixels in the same amount of physical space. As a result, high-resolution displays...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found