How can I add a background image to my application without using the inspect feature?

I used the inspect hack with CSS on my application and it works on my personal laptop! However, when I try to open the application on my school laptop, it doesn’t work. I believe it is because my school blocked the inspect feature. Is there a way to add a background image with using the inspect feature?

Inspect is just a means to look at the DOM to know what HTML elements are being parsed to display a result. You use this information to figure out what classes to use in CSS so you can include it in your app, but the inspect feature itself doesn’t have anything to do with the result.

If including CSS in your app is working on one computer and not another, especially with background images, I think the most likely difficultly is something to do with the path of the file.

It looks like you’re pointing to a hosted image. Your network could indeed be blocking that domain as you suggested. Can you visit the image directly from school computer? If you visit the image URL and are blocked, that would confirm your suspicion.

Even if Streamlit had another way of including a background image (which it doesn’t, natively, unfortunately), you would still have the same problem. You’ll have to host the image somewhere that isn’t blocked, or download it to save and serve locally.

If you download the image and save it locally with your app files, use Static File Serving to give the image a URL you can use in CSS.

Thanks

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