🔖

Streamlitで背景を変えたいあなたへ...

2024/03/14に公開

こんにちはkirigayaです。今回はミニ記事です。
Streamlitで背景を変えたい時あると思います。
今回はローカルで開発していて環境内にある画像を背景としたい場合です。
調べていくと色々な方法があるのですが最終的に表示できた手順を紹介します。
環境はMacです。
ファイル構造はこんな感じ

test_app/
│
├── app.py
├── static
    └── image.png
├── .streamlit
    └── config.toml

config.tomlの中身はこんな感じ
ドキュメント↓
https://docs.streamlit.io/library/advanced-features/static-file-serving

[server]
enableStaticServing = true

cssで<style>使って直接指定します

import streamlit as st

st.title('Image Background')

image = '/app/static/image.png'

css = f'''
<style>
    .stApp {{
        background-image: url({image});
        background-size: cover;
        background-position: center;
        background-color:rgba(255,255,255,0.4);
    }}
    .stApp > header {{
        background-color: transparent;
    }}
</style>
'''
st.markdown(css, unsafe_allow_html=True)

あとは起動するだけ...

streamlit run app.py

コマンドでも指定できるみたい...

streamlit run app.py --server.enableStaticServing=true

うまく表示できたかな...お疲れ様でした。

岩田組

Discussion