Add a Background Image to your Streamlit App

📘 Introduction

Streamlit makes it super easy to build interactive data apps in Python — without needing HTML, CSS, or JavaScript. But sometimes, you want your app to look more polished and visually appealing.

One simple way to achieve that is by adding a background image. Whether you want to match your company’s branding or make your personal project stand out, Streamlit allows you to customize the background using just a few lines of code.

In this tutorial, you’ll learn how to add both remote and local background images to your Streamlit app.

💡 Why Add a Background Image?

While Streamlit focuses on simplicity, customizing your app’s look can help:

🎨 Create a consistent visual theme
📊 Brand your dashboards with a company background
🌅 Add personality to personal or portfolio apps
🪄 Make your UI more engaging for users

✅ Prerequisites

Before starting, make sure you have the following:

🐍☑️ Python installed
📦☑️ Pip installed
🌐☑️ A virtual environment (venv) created and activated

📦1️⃣ Install Libraries

Install the following Python packages using pip:

pip install streamlit

✍️2️⃣ Create a Basic Streamlit App

Let’s start with a minimal Streamlit app.

Create a file called app.py and add this code:

import streamlit as st

st.title("🌄 Streamlit Background Image Tutorial")
st.write("Learn how to add a custom background image to your app!")

Now run your app from the terminal:

streamlit run app.py

You’ll see the classic white Streamlit layout — clean but not very exciting. Let’s change that!

🎨3️⃣ Add a Background Image from a URL

Streamlit lets you apply custom CSS using st.markdown() with unsafe_allow_html=True.

Here’s how to add a background image from an external link: