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

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.