Update app.py

app.py

@@ -3,36 +3,46 @@ import streamlit as st
 # Replace with the direct image URL
 flower_image_url = "https://i.postimg.cc/hG2FG85D/2.png"
 
-# Inject custom CSS for the background with blur effect
+# Inject custom CSS for the background with a centered and blurred image
 st.markdown(
     f"""
     <style>
-    /* General background with flower image, centered, and blurred */
-    html, body, [data-testid="stAppViewContainer"] {{
-        background-image: url("{flower_image_url}");
-        background-size: contain; /* Keep the image size proportional */
-        background-position: center; /* Center the image */
-        background-repeat: no-repeat; /* Prevent tiling */
-        filter: blur(10px); /* Apply blur effect - adjust manually */
-        font-family: 'Arial', sans-serif;
+    /* Container for background */
+    html, body {{
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+    }}
+    [data-testid="stAppViewContainer"] {{
+        position: relative;
+        z-index: 1; /* Ensure UI elements are above the background */
     }}
-    /* Adjust blur ratio for interactivity */
-    .blur-adjust {{
-        text-align: center;
-        margin-top: 05px;
+    /* Blurred background image */
+    .blurred-background {{
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1; /* Send background image behind all UI elements */
+        background-image: url("{flower_image_url}");
+        background-size: cover;
+        background-position: center;
+        filter: blur(10px); /* Adjust blur ratio here */
+        opacity: 0.8; /* Optional: Add slight transparency for a subtle effect */
     }}
     </style>
     """,
     unsafe_allow_html=True
 )
 
+# Add the blurred background div
+st.markdown('<div class="blurred-background"></div>', unsafe_allow_html=True)
+
 # Streamlit UI elements
 st.title("Word Cloud Application")
 st.markdown("Welcome to the Word Cloud Application with a blurred, centered flower background!")
 
-# Add interactivity for blur ratio adjustment
-st.markdown('<div class="blur-adjust">Adjust the blur ratio manually in the code using the <code>filter: blur()</code> property.</div>', unsafe_allow_html=True)
-
 # Add some interactivity
 if st.button("Click Me"):
     st.write("You clicked the button!")