Put lottie animation in background-CodePudding

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.

CodePudding user response：

Looks like you are missing some code in this question, the structure is wrong, no open section element and h1 is not closed, the issue might be because of that

try to create a sandbox page using https://codesandbox.io/s/ or something else

so that answer can be given appropriately.

anyways, I have made this work here

https://codesandbox.io/s/bold-butterfly-c2y8o

CodePudding user response：

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>