How do you change the background of a container?

Using Streamlit
1

Is there any way to change the background of a container? I want to be able to set a different color for the container so that it stands out from the background of my page.

2

You can pass a key to st.container and inject some CSS. For example:

image
image1494×664 64 KB

import streamlit as st

# Style

css = """
.st-key-my_blue_container {
    background-color: rgba(100, 100, 200, 0.3);
}
"""

st.html(f"<style>{css}</style>")

# Contents

"## My app"
"Some initial text " * 10

with st.container(key="my_blue_container"):
    "**Here is a container**"
    "Some :blue[blue] text " * 10

"Ending text " * 10
2 Likes
3

Thanks! Is there a way to do an image by chance?

4

Sure, you can either change the background of the container holding the image, or target the background of the image only. The latter only makes sense for something with some sort of transparency like an SVG.

image
image1168×1628 165 KB

import streamlit as st

# Style
css = """
.st-key-my_blue_container{
    background: rgba(100, 100, 200, 0.3);
}

.st-key-my_blue_container .st-key-make_it_pink img{
    background: linear-gradient(90deg,violet, pink, violet);
}
"""
st.html(f"<style>{css}</style>")

# Contents

"## My app"

image_link = R"https://placehold.co/400x100/f0d1/121?text=I%20am\nthe%20Image&font=oswald"

"The image"
st.image(image_link, caption="This image has a transparent background")

with st.container(key="my_blue_container"):
    "This is a container with a :blue[blue] background"
    "Here is the image within the container"
    st.image(image_link, caption="An image with a transparent background")

    with st.container(key="make_it_pink"):
        "This is the image within a container that only targets the *img* tags"
        st.image(image_link, caption="An image with a transparent background")
        st.image("https://picsum.photos/400/100", caption="A photo would not change the background")