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.

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: https://github.com/andfanilo/social-media-tutorials/tree/master/20220817-streamlit_css_background
- Streamlit website: https://streamlit.io/
- Streamlit docs: https://docs.streamlit.io/
- Streamlit forum: https://discuss.streamlit.io/
- Streamlit Discord (official): https://discord.gg/bTz5EDYh9Z

?Follow my daily updates on Twitter: https://twitter.com/andfanilo
?️ My other links: https://linktr.ee/andfanilo
☕ Want to support me? https://www.buymeacoffee.com/andfanilo

Want to start the Youtube Grind too? Here are some of my tools (Affiliate links)
? Music (Epidemic Sound) - https://www.epidemicsound.com/referral/a2p22s

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