[streamlit]backgroud imageをつける

やりたいこと

streamlitは簡単にフロントを作ることができる一方でデザインに関しては不自由です。
そんな時は背景画像だけ設定すれば良い感じに補えたりします。
トップページにmidjourneyで作った画像を入れただけでこんな感じ。肝心のデータ分析やらはちっぽけですが、 壮大な感じを演出できます。

やり方

基本st.markdownでstyleごりごりに書いていくのが良さそうです。
stAppが表示部分なので、怒られそうですがここを変更します。

import streamlit as st

def render()->st:
    bg_img = '''
    <style>
    .stApp {
      background-image: url("https://url");
      background-size: cover;
      background-repeat: no-repeat;
    }
    </style>
    '''

    return st.markdown(bg_img, unsafe_allow_html=True)

表示したいページでrender()してください。
また、他のコンポーネント単位でも同様にスタイリングが可能です。

st.markdown('''
<h1 style='font-size: 64px; font-family: serif; text-align: right; margin-top: 84px;'>title</h1>

<div style='font-size: 12px; width: 28rem; text-align: right; margin: auto 0 auto auto'>hogefugapiyo</div>
''', unsafe_allow_html=True)

Tips

ちなみに画像は手っ取り早くgoogle driveに上げて表示するのが楽でした。

url("https://drive.google.com/uc?export=view&id=[共有リンクの/viewの前のid]")