Add a image at the bottom of the sidebar?

Using Streamlit
1

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!

2

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
3

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