Custom Streamlit Background Image/Color Gradient through CSS

Описание: 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 ➡ https://andfanilo-newsletter.streamli...
💰 Buy me a coffee to stay awake while editing ➡ https://www.buymeacoffee.com/andfanilo
🗣️ Find my socials ➡ https://andfanilo.com

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

---

🗣️ Stay up to date with the Data Web App Ecosystem

📑 Follow my socials ➡ https://andfanilo.com
📧 Get my latest updates in your inbox ➡ https://newsletter.andfanilo.com
💰 Buy me a coffee to stay awake while editing ➡ https://www.buymeacoffee.com/andfanilo

🔗 Links

Source code: https://github.com/andfanilo/social-m...
Streamlit website: https://streamlit.io/
Streamlit docs: https://docs.streamlit.io/
Streamlit forum: https://discuss.streamlit.io/
Streamlit Discord (official):   / discord  

🔧 My tools (Affiliate links to support me)

📕 Streamlit Official Book - https://amzn.to/3QuRPwl
📷 Main Camera - https://amzn.to/3QvTosB
📷 Main Lens - https://amzn.to/3svYCwq
🎙️ Microphone - https://amzn.to/47l5ewA
🎵 Music & Sound Effects - https://www.epidemicsound.com/referra...

---

🪶 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!

⚠️ 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 providing you with free content!

#streamlit #python #datascience #dataapps