Change backgroud

Hi,
I am new to streamlit and wanted to know that Is there any way to change the background of the streamlit app and add some custom colors or images to the background?

Hi @Prakash -

If you’d like to change elements of the Streamlit theme, you can do the following:

Hi @randyzwitch !-
Thank you for the solution. I tried your code and managed to change the sidebar color but couldn’t figure it out how to change the main screen theme and more specifically I want to add an image in the background . I also tried to edit the background-image tag in the sidebar CSS with replacing the color gradient with url(" ") to import an image from the local folder but it didn’t do anything the sidebar became white again.

Hi @Prakash,

You can try doing this to change background of main content and sidebar,

 st.markdown(
    """
    <style>
    .reportview-container {
        background: url("url_goes_here")
    }
   .sidebar .sidebar-content {
        background: url("url_goes_here")
    }
    </style>
    """,
    unsafe_allow_html=True
)

Hope it helps!

Hi @ash2shukla ! ,
Thank you for looking into it i tried your code as well but still don’t know where i am doing the things wrong. there is a little colored strip showing at the top but no image neither in the side bar nor in the main content

Screenshot from 2020-09-22 14-37-43

here both the “bg.jpg” and “download.jpeg” are in same folder with app.py file

Try putting a URL and it will work,
Its not working because the client browser is unable to retrieve the image from your server as the server is not hosting static ( your images ) at root “/”. One workaround to this is to use base64 encoding of your images. Something like this-

import streamlit as st
import base64

main_bg = "sample.jpg"
main_bg_ext = "jpg"

side_bg = "sample.jpg"
side_bg_ext = "jpg"

st.markdown(
    f"""
    <style>
    .reportview-container {{
        background: url(data:image/{main_bg_ext};base64,{base64.b64encode(open(main_bg, "rb").read()).decode()})
    }}
   .sidebar .sidebar-content {{
        background: url(data:image/{side_bg_ext};base64,{base64.b64encode(open(side_bg, "rb").read()).decode()})
    }}
    </style>
    """,
    unsafe_allow_html=True
)
1 Like

Thank You @ash2shukla it worked :blush: