Add a image at the bottom of the sidebar?

Hello all,

I want to add an image at the bottom of the sidebar.
When I use the st.sidebar.image function, it just adds if after the previous command. Can anyone help how the image can be moved at the bottom? Thank you!

Modifying some nifty code from Streamlit-Extras

url='www.my_image_url.png'

st.markdown(
        f"""
        <style>
            [data-testid="stSidebarNav"] + div {{
                position:relative;
                bottom: 0;
                height:50%;
                background-image: url({url});
                background-size: 85% auto;
                background-repeat: no-repeat;
                background-position-x: center;
                background-position-y: bottom;
            }}
        </style>
        """,
        unsafe_allow_html=True,
    )

This assumes you have enough pages to fill up the SidebarNav, but you can adjust height if you have a smaller or non-existent page list.

1 Like