How do I use a background image on streamlit

🎈 Using Streamlit
43

This is how you can set local image as background in streamlit

the same for the sidebar, just use the sidebar id.
import base64
import streamlit as st

@st.cache_data
def get_img(file):
with open(file, “rb”) as f:
data = f.read()
return base64.b64encode(data).decode()

local_image_path = ‘2.png’ #make sure the image is in the same folder
img = get_img(local_image_path)

page_bg_img = f"“”

[data-testid="stAppViewContainer"] {{ background-image: url("data:image/png;base64,{img}"); background-size: cover; }}

“”"

st.markdown(page_bg_img, unsafe_allow_html=True)

44

@soft-nougat Thanks, i used this code for playing .gif file in sidebar. But 4 gifs are getting played in my sidebar in equal area. I want only the topmost. How to achieve that ?

Thanks in advance. RSJ

45

Hi @soft-nougat Can you help me with , i want to add a image to a button and set that image as clickable and also, once any query is sent, i want that button to agian send the request.

46

I just tried .gif file with st.image(), it works fine. Thanks

47

@Rajeshwar_Singh_Jenw I am using this code to diaplay my button as image

from st_click_detector import click_detector
content = f"Submit"
clicked = click_detector(content, key=“click_detector”)

#function call
if clicked
// i call my function

How can this be achieved using st.button or add image in button using st.image

//this is my function call
if clicked and query and uploaded_file:
db = lch.create_db_from_pdf(uploaded_file)
response = lch.get_response_from_query(query,db)
st.subheader(“Answer:”)
st.text(textwrap.fill(response, width=85))

48

@Sushmita_Raj I dont think that is possible with either st.button() or st.image().
If click detector is working for your app, u can use it.

49

Hey I tried this code and the previously mentioned codes also, but my background color is not changing and not even showing any error.

50

Hi @Bandhan_Majumder,

You can use something like this for your background colour:

def MyBG_colour(wch_colour): 
    my_colour = f"<style> .stApp {{background-color: {wch_colour};}} </style>"
    st.markdown(my_colour, unsafe_allow_html=True)

MyBG_colour("red")  # or pass in the hex code: Eg. MyBG_colour("#90CAF9")

I am using streamlit v1.29.0

Cheers

51

It will not show any error as it is error free.

Make sure to:

  1. Don’t use URL

  2. The image should be in the same folder.

52

It’s working … A huge thanks man! :))

1 Like
53

This time it is running.
I was using v1.31.1 but then turned into v1.29.0 and it’s working now. Thanks.

54

It doesn’t work for me for some reason. Here’s my code:

import streamlit as st
import requests
from streamlit_lottie import st_lottie
from PIL import Image
import base64

# ---- Setting up the tab ----
dizzys_trumpet = Image.open("images/Dizzys_trumpet.jpg")
st.set_page_config(page_title="Jazz", page_icon=dizzys_trumpet, layout="wide")

# ---- Using CSS ----
with open("style\style2.css") as css:
    st.markdown(f'<style>{css.read()}</style>', unsafe_allow_html=True)

# ---- Loading assets ----


# ---- Background ----
@st.cache_data
def get_base64_of_bin_file(bin_file):
    with open(bin_file, 'rb') as f:
        data = f.read()
    return base64.b64encode(data).decode()


def set_png_as_page_bg(png_file):
    bin_str = get_base64_of_bin_file(png_file)
    page_bg_img = '''
    <style>
    body {
    background-image: url("data:image/png;base64,%s");
    background-size: cover;
    }
    </style>
    ''' % bin_str

    st.markdown(page_bg_img, unsafe_allow_html=True)
    return


set_png_as_page_bg("images/milesdavis2.jpg")

# ---- Header ----
title = st.markdown("<h1 style='text-align: center; font-size: 150px;'>Jazz</h1>", unsafe_allow_html=True)
55

Thank you so much. This worked ! :smile: