Chat_input crashing background image

🎈 Using Streamlit
1

I put a background image in my app, but when i use st.chat_input, a huge part of screen crashes, like the image provided. I dont know how to fix it.

image
image1906×265 45.9 KB

2

Please can you share a minimal reproducible code snippet to show how you are adding the background and combining it with the chat input?

3

Yes ! sorry i should have put here the code.

import streamlit as st
import pandas as pd
import time

st.set_page_config(
    page_title="spotify_chat",
    page_icon="🧊",
    layout="centered",
    initial_sidebar_state="expanded",
)

page_bg_img = f'''
<style>
    .stApp{{
        background-image: url("https://img.goodfon.com/original/1920x1080/4/2d/kot-koshka-glaz-fon-chernyy.jpg");
        background-size: cover;
    }}
</style>
'''
st.markdown(page_bg_img,unsafe_allow_html=True)
st.title("🤖🗣️ Chat_to_spotify")
st.subheader('talk to music', divider = 'red')

@st.cache_data
def load_data():
    df = pd.read_csv('../01_Spotify.csv', sep = ',')
    time.sleep(4)
    return df

st.session_state['dataframe'] = load_data()

prompt = st.chat_input('talk to chatbot')

with st.sidebar:
    add_radio = st.radio(
        "Choose a shipping method",
        ("Standard (5-15 days)", "Express (2-5 days)")
    )

add_selectbox = st.sidebar.selectbox(
    "How would you like to be contacted?",
    ("Email", "Home phone", "Mobile phone")
)
4

It looks like you are using Streamlit version 1.30.0 or less. If you stick with that, you can update your CSS to:

page_bg_img = '''
<style>
    .stApp{
        background-image: url("https://img.goodfon.com/original/1920x1080/4/2d/kot-koshka-glaz-fon-chernyy.jpg");
        background-size: cover;
    }
    .stChatFloatingInputContainer{
        background: transparent;
    }
</style>
'''

In Streamlit version 1.31.0 st.chat_input was changed and this won’t work. For Streamlit version >= 1.31.0, try this instead:

page_bg_img = '''
<style>
    .stApp{
        background-image: url("https://img.goodfon.com/original/1920x1080/4/2d/kot-koshka-glaz-fon-chernyy.jpg");
        background-size: cover;
    }
    [data-testid="stBottom"] > div {
        background: transparent;
    }
</style>
'''
5

@mathcatsand thank you very much :slight_smile:

1 Like