Put lottie animation in background

Issue

I can't figure out how I can use a Lottie animation in the background and put text over it.

I am using Svelte in case it matters.

<section>

  <div class="animation">

    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
    <lottie-player src="static\animation.json" background="transparent" speed="1" style="width: 1000px; height: 1000px;" loop autoplay></lottie-player>

    <h1>
      Title
    </h1>

    <h2>
      Text
    </h2>
  </div>
</section>

<style>
  section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
  }
  
  h1 {
    width: 100%;
  }
  
  h2 {
    text-align: center;
  }
</style>

I tried using z-index but it didn't change anything.

Solution

I don't know you mean this, but hope it could help you.

section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    position: relative;
}

.title {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h1 {
    text-align: center;
}

h2 {
    text-align: center;
}

<section>
    <div class="animation">
        <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
        <lottie-player src="static\animation.json" background="transparent" speed="1" style="width: 1000px; height: 1000px;" loop autoplay></lottie-player>

    </div>
    <div class="title">
        <h1>Title</h1>
        <h2>Text</h2>
    </div>
</section>

Answered By - Sato Takeru