How to use a CSS file to change the background style?

🚀 Deployment
1

I want to use a CSS file to change the background of my web application, I have created a dynamic background with a CSS file and I want to use it in my application.

I have used the recommendations of the other forums, as they use it to put an image, but in this case I want to call a .css file to change the background and make my application look dynamic, so far I have not found documentation on the streamlit forums so I resort to the help of the community so that, in the future, if other users have the same concern they can use this module to have a guide of what to do.

I look forward to hearing from you.
Thank you very much

2

Check this out:

https://mathcatsand-examples.streamlit.app/background

1 Like
3

Actually, I want to display in the background of my application, a CSS file that generates a gradient style animation of 3 colors, the CSS code is as below:

body {
margin: auto;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
overflow: auto;
background: linear-gradient(315deg, #4f2991 3%, #7dc4ff 38%, #36cfcc 68%, #a92ed3 98%);
animation: gradient 15s ease infinite;
background-size: 400% 400%;
background-attachment: fixed;
}

@keyframes gradient {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0% 0%;
}
}

.wave {
background: rgb(255 255 255 / 25%);
border-radius: 1000% 1000% 0 0;
position: fixed;
width: 200%;
height: 12em;
animation: wave 10s -3s linear infinite;
transform: translate3d(0, 0, 0);
opacity: 0.8;
bottom: 0;
left: 0;
z-index: -1;
}

.wave:nth-of-type(2) {
bottom: -1.25em;
animation: wave 18s linear reverse infinite;
opacity: 0.8;
}

.wave:nth-of-type(3) {
bottom: -2.5em;
animation: wave 20s -1s reverse infinite;
opacity: 0.9;
}

@keyframes wave {
2% {
transform: translateX(1);
}

25% {
    transform: translateX(-25%);
}

50% {
    transform: translateX(-50%);
}

75% {
    transform: translateX(-25%);
}

100% {
    transform: translateX(1);
}

}

What I want is to open and display the css as the background of the application, so that it looks dynamic. With images it already works but I am exploring if there is a way to work with a CSS file to give more dynamism to my web application.

I’m so happy for the contribution <3

4

The same principles apply. If you are familiar with css, you can see from the example which tags/classes to grab for your background. The element to grab is not body in this case; it’s .stApp (with an extra rule to remove the header if you want). The example shows how to include plain css. If you need to include any <script> .... </script> then you will need to use st.components.v1.html('<script>...</script>') instead.

To illustrate, I changed your css to begin with:

.stApp > header {
    background-color: transparent;
}

.stApp {
    margin: auto;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    overflow: auto;
    background: linear-gradient(315deg, #4f2991 3%, #7dc4ff 38%, #36cfcc 68%, #a92ed3 98%);
    animation: gradient 15s ease infinite;
    background-size: 400% 400%;
    background-attachment: fixed;
}

I put it in a file called wave.css

Then in my app, I did:

import streamlit as st

st.title('A Random App')
st.write('Look at the pretty waves')

with open('./files/wave.css') as f:
    css = f.read()

st.markdown(f'<style>{css}</style>', unsafe_allow_html=True)

image
image1125×778 21.4 KB

1 Like