streatmlit.component.v1.html is great. I have a question, can I change the background color of the iframe displaying the html? I don’t want to change html content itself. Thank you!
Hello @amira , welcome to the community:
If you can’t play with the HTML content, you could try the CSS hack (if you need to search the forum for more topics on this):
How does it work?
You build a CSS selector that selects the iframe tag for your component in your app (you can find it by browsing the devtools component of your browser), then you apply a background-color: red; rule to it. Then you pass it through st.markdown(..., unsafe_allow_html=True) to interpret HTML/CSS globally in the app
import streamlit as st
import streamlit.components.v1 as components
st.title("Red component")
st.markdown("""
<style>iframe {background-color: red;}</style>
""", unsafe_allow_html=True)
components.html("<div>Hello world</div>")
I’d actually recommend you to try to prepend the CSS rule to your html content too, and see what’s the best:
import streamlit as st
import streamlit.components.v1 as components
st.title("Yellow component")
html_content = "<div>Hello world</div>"
yellow_background = "<style>:root {background-color: yellow;}</style>"
components.html(yellow_background + html_content)
Happy Streamlitin’ 
Fanilo
4 Likes
Hi Fanilo!
Is there a way to set the background color of an iframe to transparent?
I found an issue in Github that appeared to be solved, but I’m still facing this issue in Streamlit 1.31.0.