Is it possible to have a particles-js background in Streamlit?

🎈 Using Streamlit
,
1

Hi, I’m trying to add a particles background to my webapp, but whatever the background is blank.
I don’t know any CSS, I just try to integrate the files.

Let’s say I want to use the from this repo : GitHub - armM00/Particles.js-sample-for-Flask

Project Structure

So the project structure looks like this:

  • templates
    • index.html
  • static
    • css
      • styles.css
    • particles.json
    • particles.js

How to import them to a web.py Streamlit to have the background working?

2

Here’s a hacky version that does it with components.html

import streamlit as st
from streamlit.components.v1 import html

html(
    """
<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.11/tsparticles.min.js"> </script>
   <style>
      #particles {
         width: 5000px;
         height: 5000px;
         background-color: lightgreen;
      }
   </style>
</head>
<body>
   <div id = "particles">
   </div>
   <script>
      tsParticles.load("particles", {
         particles: {
            number: {
               value: 1000
            },
            move: {
               enable: true
            },
            color: {
               value: "#272701"
            },
         }
      });
   </script>
</body>
</html>
""",
    height=20000,
    width=20000,
)


# Add css to make the iframe fullscreen

st.markdown(
    """
<style>
    iframe {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        #width: 100vh;
        #height: 100vw;
    }
</style>
""",
    unsafe_allow_html=True,
)

st.title("Particles!")

st.write("More content")
2 Likes
3

Thanks for response.
Can you tell me how to fix the issue with the position of the background? It’s on right bottom side.

The only way to fix it I know is giving a propertify position: fixed;
However, with that property the background overlaying on top of the other elements, making them unclickable.
I’m not good at CSS, could please explain why does the particles background stick to the right bottom side?

html(
    """
<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.11/tsparticles.min.js"> </script>
   <style>
      #particles {
         width: 5000px;
         height: 5000px;
      }
   </style>
</head>
<body>
   <div id = "particles">
   </div>
   <script>
      tsParticles.load("particles", {
         particles: {
            number: {
               value: 1000
            },
            move: {
               enable: true
            },
            color: {
               value: "#FFFFFF"
            },
         }
      });
   </script>
</body>
</html>
""",
    height=20000,
    width=20000,
)

st.markdown(
    """
<style>
    iframe {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        #width: 100vh;
        #height: 100vw;
    }
</style>
""",
    unsafe_allow_html=True,
)
4

Sorry about that – you are right that position: fixed will work. This works fine for me, and allows me to click the button I’ve added. Does this work for you?

import streamlit as st
from streamlit.components.v1 import html

html(
    """
<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.11/tsparticles.min.js"> </script>
   <style>
      #particles {
         width: 5000px;
         height: 5000px;
         background-color: lightgreen;
      }
   </style>
</head>
<body>
   <div id = "particles">
   </div>
   <script>
      tsParticles.load("particles", {
         particles: {
            number: {
               value: 1000
            },
            move: {
               enable: true
            },
            color: {
               value: "#272701"
            },
         }
      });
   </script>
</body>
</html>
""",
    height=20000,
    width=20000,
)


# Add css to make the iframe fullscreen

st.markdown(
    """
<style>
    iframe {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
</style>
""",
    unsafe_allow_html=True,
)

st.title("Particles!")

st.write("More content")

st.button("Click me")