Add image above sidebar and main area

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)?

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.

2 Likes

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,
)
1 Like

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

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);

1 Like

st.image(β€œimages\imageReading.png”)