You can change the @streamlitofficial background color using Streamlit theming, but how do you go putting a color gradient or an external image?
In this video, I show you how to use the CSS Markdown Trick to inject your own custom background. I will first use the st.markdown(..., unsafe_allow_html=True) method to inject a CSS Gradient Color pattern, and show you problems you'll have if you try to further edit it.
I then proceed to load an image from an URL to Streamlit's background.
Finally, I fail to load a local image as a Streamlit background using an URL, and instead inject the image to CSS as a base64 encoded text.
I conclude by adding some CSS background properties to reposition, resize and have the background image scroll with the app.
This gives you the necessary tools to customize your Streamlit app background to your heart’s desire through CSS.

📧 My email list to keep up to date with the latest news, tutorials and resources about Streamlit & friends ➡ [ Ссылка ]
💰 Buy me a coffee to stay awake while editing ➡ [ Ссылка ]
🗣️ Find my socials ➡ [ Ссылка ]

00:00 Context
00:22 CSS Pattern
01:38 Background Image on the net
02:30 Local background image
04:14 Resize, reposition, scrollable image

👉 Links
- Source code: [ Ссылка ]
- Streamlit website: [ Ссылка ]
- Streamlit docs: [ Ссылка ]
- Streamlit forum: [ Ссылка ]
- Streamlit Discord (official): [ Ссылка ]

My tools (Affiliate links to support me!)
- 📷 Main Camera - [ Ссылка ]
- 📷 Main Lens - [ Ссылка ]
- 🎙️ Microphone - [ Ссылка ]
- 🎵 Music & Sound Effects - [ Ссылка ]
- 📕 Streamlit Official Book - [ Ссылка ]

🪶 26th video out of 35 for the year. Also HEYYY I just broke 1000 subs, thank you everyone for the support! Now let me enjoy a little summer break so I don't stress out about the "9 videos left to do in 4 months" and "4000 hours of watch time" metrics!

👍 On this channel, we love building a lot of small yet smart Streamlit apps to improve our Python chops, and recall our stories around Data Science and Content Creation. Like & Subscribe if you would like to see more videos!

#streamlit #python #datascience #dataapps

⚠️ Disclaimer: This video is not sponsored. Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. Thank you for supporting my channel so I can continue to provide you with free content!

свернуть