Add image above sidebar and main area

[tjsxstreamlit]

Using code mentioned below from thread, I am able to reduce the size of sidebar and create blank space on top.

following is the code I used for this:

import streamlit as st

st.markdown("""
    <style>
      section[data-testid="stSidebar"] {
        top: 10%; 
      }
    </style>""", unsafe_allow_html=True)

st.sidebar.title('Sidebar Title')
st.title('Main Title')

How can I add image in this blank space which common to blank area on top of sidebar and main title (dotted rectangle)?

[dataprofessor]

Hi @tjsxstreamlit

Perhaps you can try experimenting with adding an image to the CSS element data-testid="stHeader" which is the top bar that you’re looking to add to.

[edsaac]

For example:

Code:

import streamlit as st

st.title(":cat: Site")
st.sidebar.info("Show the sidebar")

## Add background image
st.markdown(
    """
    <style>
    header[data-testid="stHeader"]{
        background-image: url(https://placekitten.com/g/100/46);
        background-repeat: repeat;
        background-size: contain;
        height: 10%;
    }
    
    section[data-testid="stSidebar"] {
        top: 10%; 
      }
    </style>""",
    unsafe_allow_html=True,
)

[tjsxstreamlit]

Thank you for the response.
Can you help me understand instead of url how to pass the path to local jpg file?

[edsaac]

Check the docs about Static file serving - Streamlit Docs, that way you will be able to do something like:

background-image: url(./app/static/pika.png);

[warhawkmonk]

st.image(“images\imageReading.png”)