@christianl86
Unfortunately the short answer is that it is not possible to lazy load <div> background images – Long answer as to why was posted here on @stormman support ticket.
Lazy Loading Background images is not possible due to the way that they are coded into the vast majority of themes – most of them I believe, the background images are not added a html tag, which is required to apply lazy load filter. For example this is how the background image would have to be added for lazy load to apply to it.
<p data-bg=“https://lorempixel.com/300/200/business/10” ></p>
Theme developers add background images by style
Not only are they added by style but can be added from style.css or inline style <style> or direct on html tags with attribute is style=“”
for example, developers add theme background images:
from style.css
.header{ background-image: url( image_url ); // or background: url( image_url ); }
OR inline style
<style> .header{ background-image: url( image_url ); // or background: url( image_url ); } </style>
OR direct
<div class=“header” style=“background-image: url( image_url );“></div>
or
<div class=“header” style=“background: url( image_url ) no-repeat top left;“></div>
For a Lazy Load Background images option to be of any use, Theme developers would have to refactor their themes background image loading from any of those to just use
<p data-bg=“https://lorempixel.com/300/200/business/10” ></p>
A developer with a custom theme might do that, but parent theme developers would be highly unlikely to ever do that to just enable background image lazy load. I know we would not do it with our own Responsi Theme Framework just to enable lazy loading of a theme background image.
Regards
Steve
