To set a Lottie json file as background in Elementor Section/Container

lottie-json-file-as-background-in-elementor.html

<!-- 
First, create an Elementor section/container and set its CSS id as #lottie. 
Then, add an HTML block below it and copy/paste the following code. 
Upload your Lottie JSON file to the WordPress library and replace "path-to-lottie-file" in the code with the file URL.
-->

<style>
    #lottie {
        position: relative;
    }

    .lottie-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1; 
    }

   
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie_light.min.js"></script>
<script>
jQuery(document).ready(function($) {
    
    function setLottieBackground($container, lottieUrl) {
        var $lottieBackground = $('<div class="lottie-background"></div>');
        $container.prepend($lottieBackground); 

        var animation = bodymovin.loadAnimation({
            container: $lottieBackground.get(0), 
            renderer: 'svg',
            loop: true,
            autoplay: true,
            path: lottieUrl
        });
    }

    // Set Lottie background for an Elementor section/container
    var $container = $('#lottie');
    var lottieUrl = 'path-to-lottie-file'; //Replace this with your file URL

   
    if (lottieUrl && $container.length) {
        setLottieBackground($container, lottieUrl);
    }
});
</script>