Docs / Image / Lazy Loading Background Images

Lazy Loading Background Images

Unlike <img> tag 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 image is inside some CSS class or a separate css file, we cannot detect them. In such cases, you can use our helper CSS class "lazy-bg".

Add "lazy-bg" to the div containing the background image.

Here is an example in Gutenberg editor: