Set Lottie to "cover" on web player

Question

I'm trying to create a background animation that uses a lottie that will behave like an image set to "cover" - i.e. it will crop the image as the page is resized so that it remains 100% of the height of the view.

https://codepen.io/michaelzero00/pen/KKXJjOg

I expected

preserveAspectRatio="xMinYMin slice"

to do this for me, but it's still resizing to maintain aspect ratio.

Answer 1

The following CSS might be helpful. The "lottie" will take up the full width and height of the screen, and z-index set to -1 keeps it behind other elements.

lottie-player {
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right: 0;
  z-index: -1;
}