James Revillini

A major drawback to using Elementor is that the background images used for sections and columns are all loaded when the page loads. Using a plugin like WP Rocket or BJ Lazy Load will not solve this issue. This plugin fixes that.
The plugin is dead simple. No extra database tables or queries, no admin screens with difficult options to understand, and no dependencies other than that the page is designed with Elementor. It injects a little JavaScript and CSS on the front-end. The CSS hides all backgrounds on all non-animated sections and columns. The JavaScript detects the visitor’s scrolling and starts loading the background images as they get close to those sections/columns using the WayPoints JS library (which is packaged with Elementor).
New
<ul>
<li>support has been added for the following Elementor Pro elements: Flip Box and Slider – thanks for the idea @dollhauss</li>
</ul>

Lazy Load Elementor Background Images

Lazy load background images of Elementor sections, columns, and some elements. Compatible with Elementor Pro.

Hira Ansari

Add HA CSS Background Generator Panel in any WP theme customization section. Add lightweight imageless and fast loading CSS background patterns to your pages or any HTML emelent of your webpages i.e tag / id or class.
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/pokVoyRTivA?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
**Select from 20 different beautiful CSS patterns types including
<ul>
<li>Modern Gradient</li>
<li>Checks</li>
<li>Stripes</li>
<li>Window Pane</li>
<li>Floral</li>
<li>Tile</li>
<li>Paisley</li>
<li>Chevron</li>
</ul>
List of HTML Element options:
<ul>
<li>Body tag</li>
<li>Any other HTML tag</li>
<li>Any CSS ID</li>
<li>Any CSS Class</li>
</ul>
Learn more about <a href="https://hiraansari.dev/wordpress-plugin/ha-css-background-generator-wp-plugin/" rel="nofollow ugc">HA CSS Background Generator Plugin features</a>
<h4>HA Color Customizer needs your support</h4>
It is hard to continue development and support for the free plugins without contributions from users like you. If you enjoy using HA CSS Background Generator and find it useful, please consider <a href="https://www.paypal.com/donate/?hosted_button_id=C5C26A6PEFFHQ" rel="nofollow ugc">making a donation</a>. Your donation will help encourage and support the plugin’s continued development and better user support.
<ul>
<li>
If you have suggestions for a new plugins or addon options, feel free to email me at <a href="mailto:contact@hiraansari.dev" rel="nofollow ugc">contact@hiraansari.dev</a>
</li>
<li>
Other Plugins by me: 
— <a href="https://wordpress.org/plugins/ha-font-color-customizer/" rel="ugc">HA Font Color Customizer</a> 
— <a href="https://wordpress.org/plugins/ha-background-color-customizer/" rel="ugc">HA Background Color Customizer</a> 
— See all current and upcoming plugins details here: <a href="https://designdevelopseo.co.uk/wp-plugins/" rel="nofollow ugc">Website WP Plugins Page</a>
</li>
<li>
Connect with me on <a href="https://www.linkedin.com/in/HiraAnsari/" rel="nofollow ugc">LinkedIn</a>
</li>
<li>
Want regular updates? Like my page on <a href="https://www.facebook.com/seo.agency.west.london/" rel="nofollow ugc">Facebook</a>!
</li>
<li>
Hire me on <a href="https://www.upwork.com/freelancers/seomanager" rel="nofollow ugc">Upwork</a>
</li>
<li>
Or hire me directly from my website: <a href="https://hiraansari.dev/hire-hourly/" rel="nofollow ugc">www.HiraAnsari.dev</a>
</li>
</ul>

HA CSS Background Generator

Use HA CSS Backgrounds Generator to add CSS imageless background patterns in any HTML tag/id/class in your WP theme pages.

Lazy Load Elementor Background Images vs HA CSS Background Generator