How add lottie animation on background streamlit app?

I have streamlit app and i need add lottie amination on this background. Animation - it is json file on my page.

Some code for open json file as lottie images:

import streamlit as st
from streamlit_lottie import st_lottie

def load_image_json(path):

    """ Load animation and images from json """

    with open(path, 'r') as j:
        animation = json.loads(
        return animation
back_image = load_image_json('image/background_gradient.json')

I try this, but is dont work:

page_bg_img = '''
.stApp {
background-image: {st_lottie(back_image, key='back')};
background-size: cover;

st.markdown(page_bg_img, unsafe_allow_html=True)

Lottie files are not supported in the types of images that can go in the background-image CSS property (Image file type and format guide - Web media technologies | MDN).

If you happen to have an animated SVG, here is how to encode it into the background-image property.


import streamlit as st
import base64

## Create a SVG image
svg_text = """
<svg version="1.1"
     width="300" height="200"
    <rect width="100%" height="100%" fill="#8A2BE220" />
  <circle cx="150" cy="100" r="100" fill="#00ee6040">
      repeatCount="indefinite" />
  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

## Encode the SVG
svg_bstr = (base64.b64encode(bytes(svg_text,'utf-8'))).decode('utf-8')

## Insert the encoded SVG in the CSS style sheet
        .stApp {{
            background-image: url(data:image/svg+xml;base64,{svg_bstr});
            background-position: center; 
            background-repeat: repeat; 
            background-size: cover; 
    """, unsafe_allow_html=True

" # ๐Ÿ“ SVG in the background"

for _ in range(5):
    cols = st.columns([0.5,2])
    with cols[0]: st.image("")
    with cols[1]: "Some repeated text"*50
1 Like

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


import streamlit as st

lottie = """
<script src=""></script>
<lottie-player src=""  background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop  autoplay></lottie-player>

        iframe {
            position: fixed;
            top: 2rem;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
    """, 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("")
    with cols[1]: "Some repeated text"*50

@ edsaac Thank you very much, I will test soon

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.