How to Add a Background Image to Your Streamlit App

From an Image’s URL or Your Local Computer — Learn Both Ways

Image by DavidRockDesign from Pixabay

I like building Streamlit apps in my spare time, both for learning purposes and for fun. Streamlit, the trending all-python framework, allows data scientists like me, programmers, or whoever knows how to code in python, to quickly and easily build beautiful machine learning and data apps. You don’t need to have front-end web development experience to build web apps using Streamlit. If you are reasonably proficient with python, you are all good to go!

In today’s post, I’d like to show you how to add a background image to a Streamlit app— either from a URL or from your local computer. We will use the ‘Language Learning App’ in the following article for demonstration purposes and see how to add a background image to it. If you have already built an app, you can just simply insert the code snippet in today’s post to your app’s python file and have your background image added to your app instantly.

Create a Simple Language Learning App Using Streamlit

Image by Author (background image by Pixabay)

To add a background image to your Streamlit app, you will need to use st.markdown() with CSS. Alright, I know I said earlier that you don’t need to have any front-end web development experience to build a Streamlit app. In this use case, we do need to apply just a little bit of HTML/CSS knowledge to get the work done.

So what is CSS? CSS, abbreviated for Cascading Style Sheets, is a style sheet language used to control the layout and style of a webpage written in a markup language such as HTML or XML. With CSS, you can define a variety of the styles of the webpages such as the color, font, size of the text, how different HTML elements are laid out, what background images to be used, etc.

For example, we can specify the background image in the <style> element with the CSS background-image property. This HTML element is…