How to change the background color of my Streamlit app?

🎈 Using Streamlit
1

Summary

Greetings, I hope everyone is doing well. I am looking to modify the background color of my Streamlit app, but I’m currently having difficulty doing so.

I am attempting to achieve the background colour demonstrated in the YouTube video mentioned below. I kindly request your assistance with this. Thank you.

Links

1 Like
2

@andfanilo has great video for that! :slight_smile:

3 Likes
3

@Charly_Wargnier Thank you for your response. I have already seen the video, but unable to achieve the desired one. Because there are multiple colour combinations. If you kindly help me with the code, it will be grate for me.

1 Like
4

@andfanilo are you able to help @Aritra here?

1 Like
5

Hi @Aritra I used the following code to set a background image for my app:

page_bg_img = f"""
<style>
[data-testid="stAppViewContainer"] > .main {{
background-image: url("https://i.postimg.cc/4xgNnkfX/Untitled-design.png");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: local;
}}
[data-testid="stHeader"] {{
background: rgba(0,0,0,0);
}}
</style>
"""

st.markdown(page_bg_img, unsafe_allow_html=True)

Hope this helps

4 Likes
6

@Oleksandr_Arsentiev Thank you for your response. You are setting a particular image to the background, I want to change the app background colour using different shades of liner-gradient and all, as shown in the YouTube video below. How to achieve it without using an image ?

Video link: Aurora UI Gradient Using CSS | UI Trend 2021 - YouTube

7

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