How do I make an image be the full width of my browser?

Using Streamlit
1

I’m trying to embed an image in my streamlit app and I want to make the image fill the full width of the browser like the banner at the top of this one #COVID19 Discourse on Twitter. How do I do that?

I tried this approach, however there is still padding around the streamlit app so the image does not fill the entire browser.
Screen Shot 2021-05-05 at 6.33.22 PM

from PIL import Image
image = Image.open('background.png')
st.image(image)

I also tried the method in How do I use a background image on streamlit but that gave me a background image but not a banner image.

Thank you so much!

2

you can add width and height parameter to control the size of your image

for example:
st.image(“your picture file name”, width=1000, height=1500)

1 Like
3

Hi @jojojo, welcome to the Streamlit community! :tada: :partying_face: :tada:

You can display an image and get it to fill the width of your screen by setting an appropriate value for the width parameter in st.image(). For example:

from PIL import Image
background = Image.open('background.png')
st.image(background, width=1920)

Happy Streamlit-ing! :balloon:
Snehan

1 Like