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 ➡ andfanilo-newsletter.streamli...
💰 Buy me a coffee to stay awake while editing ➡ www.buymeacoffee.com/andfanilo
🗣️ Find my socials ➡ 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
👉 Links
- Source code: github.com/andfanilo/social-m...
- Streamlit website: streamlit.io/
- Streamlit docs: docs.streamlit.io/
- Streamlit forum: discuss.streamlit.io/
- Streamlit Discord (official): / discord
My tools (Affiliate links to support me!)
- 📷 Main Camera - amzn.to/3QvTosB
- 📷 Main Lens - amzn.to/3svYCwq
- 🎙️ Microphone - amzn.to/47l5ewA
- 🎵 Music & Sound Effects - www.epidemicsound.com/referra...
- 📕 Streamlit Official Book - amzn.to/3QuRPwl
🪶 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!

Пікірлер: 89

  • @CodingIsFun
    @CodingIsFun Жыл бұрын

    That is super useful! Thank you!

  • @sizeli7120
    @sizeli7120 Жыл бұрын

    Fantastic work, very inspiring! Thank you !!

  • @andfanilo

    @andfanilo

    Жыл бұрын

    Thanks for your support, much appreciated 😊

  • @junealexissantos4341
    @junealexissantos4341 Жыл бұрын

    This is so cool! Hope they add new features that will support these methods natively.

  • @andfanilo

    @andfanilo

    Жыл бұрын

    Hey June! Wait & See ... maybe enabling CSS parsing for backgroundColor in the config file for theming could already help. I think this is the kind of feature that needs activity in this issue (github.com/streamlit/streamlit/issues/2725 ) to be considered

  • @oleksandrarsentiev7152
    @oleksandrarsentiev7152 Жыл бұрын

    exactly what I was looking for! Thanks a lot!

  • @andfanilo

    @andfanilo

    Жыл бұрын

    Awesome! What background are you planning to put :D ?

  • @digitalcivilulydighed
    @digitalcivilulydighed4 ай бұрын

    The best channel for streamlit!

  • @andfanilo

    @andfanilo

    4 ай бұрын

    Thanks for the support 🙏 see you on the next video!

  • @alessandroceccarelli6889
    @alessandroceccarelli6889 Жыл бұрын

    Great content as usual 👏🏻👏🏻

  • @andfanilo

    @andfanilo

    Жыл бұрын

    Thanks for the endless support! Hope you are enjoying summer :)

  • @juliocamplaz3212
    @juliocamplaz32125 ай бұрын

    amazing!!! you just saved me a lot of hours!!! 👏

  • @flight5056
    @flight5056 Жыл бұрын

    ❣awesome video - super useful.. lots of info packed into 5 min

  • @andfanilo

    @andfanilo

    Жыл бұрын

    Thanks for the support! You should be enjoying your summer break though!!

  • @cwenfernandes6072
    @cwenfernandes60725 ай бұрын

    This is so helpful really solved my problem of adding background to streamlit.. Thank you !!!

  • @andfanilo

    @andfanilo

    5 ай бұрын

    Glad it helped! Thanks for watching :)

  • @iputudodiksukmaindranata4599
    @iputudodiksukmaindranata4599 Жыл бұрын

    That is super useful broo! Thank you!

  • @andfanilo

    @andfanilo

    Жыл бұрын

    Happy to help :) thanks for the support!

  • Жыл бұрын

    Good work. Again !

  • @andfanilo

    @andfanilo

    Жыл бұрын

    Thank you for following and your support :) very appreciated

  • @reflet1501
    @reflet150111 ай бұрын

    Thanks, this helped out a lot!

  • @andfanilo

    @andfanilo

    11 ай бұрын

    Glad to hear, looking forward to your app!

  • @i.dragons
    @i.dragons Жыл бұрын

    Great Work!

  • @andfanilo

    @andfanilo

    Жыл бұрын

    Thank you, looking forward to Streamlit with background image apps from you :)

  • @harrygolde6031
    @harrygolde60316 ай бұрын

    Thank you!

  • @shosh232314
    @shosh232314 Жыл бұрын

    Thank u so much🙏🏻

  • @andfanilo

    @andfanilo

    Жыл бұрын

    You're welcome 😊 happy Streamlitin'!

  • @lhcbenac
    @lhcbenac Жыл бұрын

    amazing joke " Oh no, not CSS" . Got me laughing for a while on this! Great content keep going , this chanel is really awesome.

  • @andfanilo

    @andfanilo

    Жыл бұрын

    Glad you enjoyed it, thanks for the support ! I will keep going and hope to see you around :)

  • @tareefroustom6759
    @tareefroustom6759 Жыл бұрын

    Love it

  • @andfanilo

    @andfanilo

    Жыл бұрын

    Thanks :D

  • @rodrigobogado653
    @rodrigobogado6532 ай бұрын

    It's 3 in the morning here and every time I put on streamlit I get fanilo hahahaha. Thanks for the videos bro!

  • @andfanilo

    @andfanilo

    2 ай бұрын

    😆 Aren't my videos too "exciting" to get you to sleep?! Thanks for the support as always, very appreciated :) also there's a new one coming tomorrow eheh

  • @rodrigobogado653

    @rodrigobogado653

    2 ай бұрын

    @@andfanilo Very good videos, I was just looking at the backgrounds and how to make something more personalized, thanks man

  • @DrGauravAI
    @DrGauravAI Жыл бұрын

    Awesome

  • @andfanilo

    @andfanilo

    Жыл бұрын

    Looking forward to your masterpiece 🙂

  • @amarnath1828
    @amarnath18283 ай бұрын

    thank you sir

  • @andfanilo

    @andfanilo

    3 ай бұрын

    Thanks for watching :) see you on the next one

  • @elenagavrilova3109
    @elenagavrilova31098 ай бұрын

    thank you!

  • @andfanilo

    @andfanilo

    8 ай бұрын

    You're welcome! Hope to keep seeing you around :)

  • @mahipalbora4679
    @mahipalbora46799 ай бұрын

    really helpful. How can we change the background color of an ?. I have been really struggling with that

  • @badabd3620
    @badabd3620 Жыл бұрын

    super ta vidéo

  • @andfanilo

    @andfanilo

    Жыл бұрын

    Merci pour le soutien 😁

  • @wooof9470
    @wooof94704 ай бұрын

    Good video

  • @andfanilo

    @andfanilo

    4 ай бұрын

    Thanks for watching :)

  • @Sonntagssoziologe
    @SonntagssoziologeАй бұрын

    Oh no css I cried, but now I'm jumping happily through the grass.

  • @darrellardhanihidayat555
    @darrellardhanihidayat555 Жыл бұрын

    hi sensei, first things first thk for the video so i can learn how to customize background on streamlit using css, but i got 1 tiny problem, which is the photo form url is not in the streamlit background, how to fix it sensei🙏🙏

  • @samuelsimons4649
    @samuelsimons4649 Жыл бұрын

    King!

  • @andfanilo

    @andfanilo

    Жыл бұрын

    Thanks for watching, looking forward to the background image you will choose !

  • @estelari
    @estelari Жыл бұрын

    thankssss

  • @andfanilo

    @andfanilo

    Жыл бұрын

    Your welcome =) what background are you trying to put?

  • @lucasfescina
    @lucasfescina Жыл бұрын

    your videos are awasome

  • @andfanilo

    @andfanilo

    Жыл бұрын

    Thanks for the feedback, hope to keep seeing you around! What images are you putting in Streamlit background :) ?

  • @lucasfescina

    @lucasfescina

    Жыл бұрын

    @@andfanilo I gave up when I saw hoe hard it is haha

  • @lucasfescina

    @lucasfescina

    Жыл бұрын

    Can I ask something: streamlit cloud accept an archive pickle ?

  • @andfanilo

    @andfanilo

    Жыл бұрын

    @@lucasfescina From memory anything stored in the Github repo is available in the deployed app. As long as the pickle is not too big and stored in Github it should be fine. You can also download it from some remote Google drive location and cache it after deserializing.

  • @miojovege
    @miojovege Жыл бұрын

    Genius

  • @andfanilo

    @andfanilo

    Жыл бұрын

    Thanks for watching, looking forward to seeing your app with a stylish background!

  • @vladigospel
    @vladigospel Жыл бұрын

    tks for the video, I have a problem, when I try to add a local background image with the base64 method, the "No such file or directory: 'image.jpg' " error appears. I have the image in the same folder where I have the .py file, that is correct? I really appreciate your help

  • @andfanilo

    @andfanilo

    Жыл бұрын

    Hello Vladimir! It will depend on the working directory, which is from where you are running the streamlit command. If you are running from a different folder than where the script is, then the relative path will start from the initial folder, not the script's one. Same issue if you are running a multipage app, the folder for the relative pathing would not be your script but the root main script. Don't hesitate to run "st.write(os.getcwd())" to see where you are running this from, and "st.write(os.listdir("./"))" to see if your image.jpg is in this list, and if that's not the case you may need to change "image.jpg" to "../image.jpg" or "folder/image.jpg" to traverse your directory. Or not totally tested but the __file__ variable returns the location of the file so using pathlib you could do "(Path(__file__).resolve().parent / "image.jpg"" to go from your script to the script's folder to the image.jpg next to the script. Hope this helps Fanilo

  • @sahitya2042

    @sahitya2042

    Жыл бұрын

    @@andfanilo Hey Fanilo ! I ran " st.write(os.listdir("./")) " and found my image in the list. But still couldn't find my background image in my website. Could You please help ? Thank You Sahitya

  • @haripriyareddy7978

    @haripriyareddy7978

    7 ай бұрын

    ​@@sahitya2042did u get it if so kindly help me to make it done even I am facing the same issue

  • @ufk_sn
    @ufk_sn11 ай бұрын

    thanks for the video. I want to change the background color of only one column/container and tried the code below but it changes the color of all of the columns/containers. How can I handle it? columns(2) with cols [0]: page_bg_img = """ [data-testid="column"] { background-color: black; } """ st.markdown(page_bg_img,unsafe_allow_html=True)

  • @andfanilo

    @andfanilo

    11 ай бұрын

    Hey! It's a bit of a pain but discuss.streamlit.io/t/changing-color-of-a-column/10175/3 or kzread.info/dash/bejne/hYCttZKvaMXYYpM.html should help I haven't tried but extras.streamlit.app/Styleable%20Container on a specific column css may do the trick too Hope this help quickstart something! Fanilo

  • @eugenmalatov5470
    @eugenmalatov54705 ай бұрын

    Funny presentation and amazing content. A bit too fast for me with all the code in the background (but need to learn to use the k key) Anyways, one thing I have not understood. So, normally one needs to put the image in the correct static folder. Seems normal and easy. You say you want to use a markdown as text (image -> text encoding). Fair enoug, but where do you put the image file? I did not get it.

  • @andfanilo

    @andfanilo

    5 ай бұрын

    Hello! As per the source code ( github.com/andfanilo/social-media-tutorials/blob/master/20220817-streamlit_css_background/streamlit_app.py ) you can put the image wherever you want, since you are going to read the image in your Python code and encode it as base64 programmatically ( with the `get_img_as_base64("image.jpg")` line, if you put the image in an "assets' folder it will be `get_img_as_base64("assets/image.jpg")`) This video being a little old, there is now a better way to do with static file serving ( docs.streamlit.io/library/advanced-features/static-file-serving ). 1. You enable static file serving through `.streamlit/config.toml` adding: ``` [server] enableStaticServing = true ``` 2. you put your image in `static` folder at the root of your project, it should now be served at the `localhost:8501/app/static/image.jpg` link 3. In your st.markdown code, you can point directly to the image url instead of using the base64 representation: ``` import streamlit as st page_bg_img = f""" [data-testid="stAppViewContainer"] > .main {{ background-image: url("app/static/image.jpg"); }} """ st.markdown(page_bg_img, unsafe_allow_html=True) ``` Good luck!

  • @eugenmalatov5470

    @eugenmalatov5470

    5 ай бұрын

    @@andfanilo Thank you !!!! :))

  • @gehhard
    @gehhard9 ай бұрын

    I am Brazilian, is it possible integrate statsmodel with streamlit?

  • @andfanilo

    @andfanilo

    9 ай бұрын

    Hello, Yes, Streamlit is really only providing a web app layer over a Python script, so statsmodel would still work the same Have a nice day!

  • @user-uo4cy7mx6t
    @user-uo4cy7mx6t8 ай бұрын

    Thank you very much❤ But when I change background, my app is running slow

  • @andfanilo

    @andfanilo

    8 ай бұрын

    Hey, that's odd..is your image heavy, like a high resolution PNG?

  • Жыл бұрын

    haha I like your voice, so impressive and attractive

  • @andfanilo

    @andfanilo

    Жыл бұрын

    Thank you for the compliment, have a nice day!

  • @asifkhanpattan9982
    @asifkhanpattan99827 ай бұрын

    can i know from where u had learn this??

  • @andfanilo

    @andfanilo

    7 ай бұрын

    Hey! Hmmm, from experience in building HTML/CSS frontends and a bit of forum reading discuss.streamlit.io/

  • @ArminEskandary
    @ArminEskandary Жыл бұрын

    Hi bro . I need ur help . I want to prevent my app from screen capture and screenshots . Is there any html/css markdown code for it ??

  • @andfanilo

    @andfanilo

    Жыл бұрын

    Hey! No I don't think so, screen capture is system level so no app could have access to those to prevent it :/ what are you trying to achieve?

  • @ArminEskandary

    @ArminEskandary

    Жыл бұрын

    @@andfanilo yeah . There are some websites that prevents recording such as spot player and netflix-us

  • @andfanilo

    @andfanilo

    Жыл бұрын

    I mean, I could still capture the live video/audio feed with OBS for example, so even if you can prevent it at browser-level, I can capture the live feed. But I think I understand, there are ways to make it harder from stackoverflow.com/questions/9756837/prevent-html5-video-from-being-downloaded-right-click-saved . Apparently by adding 'oncontextmenu="return false;"' to any video element it would be doable. Using the technique described here (kzread.info/dash/bejne/hYCttZKvaMXYYpM.html) to leave the component , target all video elements and apply that contextmenu, yeah it could work. I haven't tried since I'm actually on a summer break :) but let me know if that helps a bit

  • @jackychan4640
    @jackychan4640 Жыл бұрын

    Thanks Fanilo Andriannasolo

  • @andfanilo

    @andfanilo

    Жыл бұрын

    Thanks for watching and for your support :) happy Streamlitin' !

  • @ainanirina758
    @ainanirina758 Жыл бұрын

    Tsy nampoiziko ity chaine ity hoe gasy, mafinaritra! Aty Madagascar ve enao?

  • @ananthramkumar9293
    @ananthramkumar929310 ай бұрын

    You need to explain in detail.

  • @andfanilo

    @andfanilo

    10 ай бұрын

    Hello, you'll have to be more precise on what part you need more detail, otherwise no one can help you ^^"

  • @gauthamsuresh4316
    @gauthamsuresh43163 ай бұрын

    Bro when you are explaining , please say it completely and clearly please. Most of people in streamlit community wants colour-gradient i their code , and you just said do this ....etc. Everything is in a big hurry. Please bro , youtube time limit is 10 or 12 mins right? So please , say things slowly and clearly . So that any beginner who watches your video can learn. Clearly I am confused. Your gradient method isnt working in my code. I wrote the complete argument too. See? this is what i meant by not understanding bro. I'm not hating on you. But people came to see your video , watching yo thumbnail about some basic css styling and you explained everything in a jiffy.

  • @flynneugene2675
    @flynneugene267525 күн бұрын

    bad

  • @fabienbenoit6650
    @fabienbenoit66505 ай бұрын

    Dude you miss the whole point while trying so hard to be funny the worst presentation ever

  • @andfanilo

    @andfanilo

    5 ай бұрын

    Too bad 🙂 have a nice day!

  • @RandyGriggs
    @RandyGriggs11 ай бұрын

    Hey Fanilo, This is not working for me when I test on my local machine. Can you advise? @st.cache_data def get_img_as_base64(file): with open(file, "rb") as f: data = f.read() return base64.b64encode(data).decode() img = get_img_as_base64("./images/DeltaPacific_Logo.jpg") [data-testid="stSidebar"] > div:first-child {{ background-image: url("data:image/jpg;base64,{img}"); background-size: 200px; background-repeat: no-repeat; background-position: center; }} Thank you in advance