How to lazy load background images?

Unlike <img> tags images, background images are hard to detect.

FlyingPress automatically lazy load background images if they're inlined in the HTML. For example:

<div style="background-image: url('.../some-image.jpg')"> </div>

However, if the background images are inside some CSS class or a separate css file, we cannot detect them. In such situations, you can use our helper CSS class "lazy-bg". Just add "lazy-bg" do the div or the parent div containing background images. 

Here is an example in Gutenberg editor: