How do I use a background image on streamlit

Hey @timL!

I hacked it, but maybe someone has a better idea. For now, try this:

def sidebar_bg(side_bg):

   side_bg_ext = 'png'

   st.markdown(
      f"""
      <style>
      [data-testid="stSidebar"] > div:first-child {{
          background: url(data:image/{side_bg_ext};base64,{base64.b64encode(open(side_bg, "rb").read()).decode()});
      }}
      </style>
      """,
      unsafe_allow_html=True,
      )

Call this

side_bg = 'path_to_local_image'
sidebar_bg(side_bg)

I tried it locally and it works! :slight_smile:

3 Likes

Hello , i tried your code and it worked perfectly , i wonder would it work for gifs ?

Hey @tarek-kerbedj!

Welcome to the Streamlit community. :sparkles:

The code I shared works with gifs as well, just use

def sidebar_bg(side_bg):

   side_bg_ext = 'gif'

   st.markdown(
      f"""
      <style>
      [data-testid="stSidebar"] > div:first-child {{
          background: url(data:image/{side_bg_ext};base64,{base64.b64encode(open(side_bg, "rb").read()).decode()});
      }}
      </style>
      """,
      unsafe_allow_html=True,
      )

Call this

side_bg = 'path_to_local_image.gif'
sidebar_bg(side_bg)

Let me know if you can replicate. :slight_smile:

Hey, @soft-nougat thanks a lot! It worked. You saved my day. :smiley:

1 Like

Hey, @soft-nougat your code is working great!
Is there any way to set the background image for a container only instead of the whole app?
Thank you!

Hey @Eevee!

Sorry for the late response, I am not sure how to approach this. I did use this approach to change the sidebar image only, you can see that I call the [data-testid=“stSidebar”] div and set an image - code below:

def sidebar_bg(side_bg):

   side_bg_ext = 'png'

   st.markdown(
      f"""
      <style>
      [data-testid="stSidebar"] > div:first-child {{
          background: url(data:image/{side_bg_ext};base64,{base64.b64encode(open(side_bg, "rb").read()).decode()});
      }}
      </style>
      """,
      unsafe_allow_html=True,
      )

Maybe this already helps - if not let me know. :slight_smile:

Hey @soft-nougat, thank you for the code!

Is there a way to change also the background of the top white strip (see the screenshot)?

I would use the same code as for the sidebar, but I don’t know how to identify that element.

Thanks!

1 Like

Hey @Andrea_Pesare! :slight_smile:

Glad you found the code useful. I cannot replicate the white bar on my end, but you can use this logic to find the div name:

Go to the white bar, inspect element and find the information on the name on the right. Try to change the name of the data-testid in the code below ([data-testid=“stSidebar”]) to the name you found on the right:

def sidebar_bg(side_bg):

   side_bg_ext = 'png'

   st.markdown(
      f"""
      <style>
      [data-testid="stSidebar"] > div:first-child {{
          background: url(data:image/{side_bg_ext};base64,{base64.b64encode(open(side_bg, "rb").read()).decode()});
      }}
      </style>
      """,
      unsafe_allow_html=True,
      )

It will probably take a few tries to get it right, but this is the logic I used to hack the sidebar :smiley:
Let me know how it goes!

Hi @soft-nougat, thank you so much!

That element should be the stHeader. I tried with

f"""
      <style>
      [data-testid="stHeader"] > div:first-child {{
          background: url(data:image/{img_ext};base64,{bin_str});
      }}
      </style>
"""

but it didn’t work, it only colored a tiny strip “behind” the real header. Then I tried

f"""
      <style>
      header.css-k0sv6k.e8zbici2 {{
          background: url(data:image/{img_ext};base64,{bin_str});
      }}
      </style>
"""

and it works! :slightly_smiling_face:

For reference, this is the result:

1 Like

How do I add a logo from my local to the title in streamlit.

Hi @Andrea_Pesare and others,

so the stHeader method doesn’t work but also finding the artificial “real” header name is not working. How to fix and set this straight?

f"""
     <style>
     header.css-k0sv6k.e8zbici2 {{
         background: url(data:image/{img_ext};base64,{bin_str});
     }}
     </style>
"""