How add lottie animation on background streamlit app?

Using Streamlit
3

I totally missed that you could just fix the position of the iframe containing the lottie animation in the page :dotted_line_face:

lottie-intheback

Code: 
import streamlit as st

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

st.markdown("""
    <style>
        iframe {
            position: fixed;
            top: 2rem;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            z-index=-1;
        }
    </style>
    """, unsafe_allow_html=True
)

" # 💮 Lottie in the background"
st.components.v1.html(lottie, width=310, height=310)

for _ in range(5):
    cols = st.columns([0.5,2])
    with cols[0]: st.image("http://placekitten.com/200/400")
    with cols[1]: "Some repeated text"*50
4 Likes