Update app.py

app.py

@@ -73,35 +73,57 @@ def img_tag(path: Path, alt: str, cls: str) -> str:
 def inject_background(image_path: Path, opacity: float = 0.12) -> None:
     """
     Paint a page-wide background image with adjustable opacity.
-    Uses a ::before layer attached to the Streamlit app container.
+    Works across Streamlit versions by targeting .stApp and the view container.
     """
     uri = data_uri(image_path)
     if not uri:
+        # Optional: small on-screen hint to confirm path issues
+        st.caption(f"Background image not found: {image_path}")
         return
-    # Tip: tweak filter() to taste (e.g., blur or desaturate for readability)
+
     st.markdown(f"""
     <style>
       :root {{
         --bg-opacity: {max(0.0, min(opacity, 1.0))};
       }}
-      /* Full-page fixed background behind all content */
-      [data-testid="stAppViewContainer"]::before {{
+
+      /* Make sure the app root can host a positioned overlay */
+      .stApp {{
+        position: relative !important;
+        background: transparent !important;
+      }}
+
+      /* Some Streamlit builds still use this container; keep it transparent */
+      [data-testid="stAppViewContainer"] {{
+        background: transparent !important;
+      }}
+
+      /* Main content area should not paint over the background */
+      [data-testid="stAppViewContainer"] > .main {{
+        background: transparent !important;
+      }}
+
+      html, body {{
+        background: transparent !important;
+      }}
+
+      /* Background overlay inside .stApp so it always sits behind content */
+      .stApp::before {{
         content: "";
-        position: fixed;
+        position: fixed;   /* fixed to viewport */
         inset: 0;
-        z-index: -1;
+        z-index: 0;        /* below all content we'll raise to 1 */
         background-image: url('{uri}');
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
         opacity: var(--bg-opacity);
-        filter: saturate(0.9) brightness(1.05); /* add blur(2px) if you want */
+        filter: saturate(0.9) brightness(1.05);  /* add blur(2px) if desired */
+        pointer-events: none; /* never intercept clicks */
       }}
 
-      /* Keep main container transparent to let the bg show through the gaps */
-      [data-testid="stAppViewContainer"] > .main {{
-        background: transparent !important;
-      }}
+      /* Ensure all Streamlit content stacks above the bg */
+      .stApp > * {{ position: relative; z-index: 1; }}
     </style>
     """, unsafe_allow_html=True)