Update style.css

style.css

@@ -1,24 +1,16 @@
-/* --- Page background: Three-layer ESCP background --- */
+/* --- Page background: Top header + mid repeating --- */
 html, body {
   background-color: rgb(40,9,109) !important;
   background-image: 
     url('https://huggingface.co/spaces/ESCP/RX12WorkshopTemplate/resolve/main/background_top.png'),
-    url('https://huggingface.co/spaces/ESCP/RX12WorkshopTemplate/resolve/main/background_bottom.png'),
     url('https://huggingface.co/spaces/ESCP/RX12WorkshopTemplate/resolve/main/background_mid.png') !important;
   background-position: 
     top center,
-    bottom center,
     top center !important;
   background-repeat: 
-    no-repeat,
     no-repeat,
     repeat-y !important;
-  background-attachment: 
-    scroll,
-    fixed,
-    scroll !important;
   background-size:
-    100% auto,
     100% auto,
     100% auto !important;
   margin: 0 !important;
@@ -26,13 +18,29 @@ html, body {
   min-height: 100vh !important;
 }
 
+/* --- Fixed bottom banner using ::after on body --- */
+body::after {
+  content: '' !important;
+  position: fixed !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  height: 130px !important;
+  background-image: url('https://huggingface.co/spaces/ESCP/RX12WorkshopTemplate/resolve/main/background_bottom.png') !important;
+  background-size: 100% 100% !important;
+  background-repeat: no-repeat !important;
+  background-position: bottom center !important;
+  pointer-events: none !important;
+  z-index: 9999 !important;
+}
+
 /* --- Main container: float over the banner --- */
 .gradio-container {
   max-width: 1400px !important;
   width: 94vw !important;
   margin: 0 auto !important;
   padding-top: 220px !important;
-  padding-bottom: 100px !important; /* Space for bottom banner */
+  padding-bottom: 150px !important; /* Space for bottom banner */
   background: transparent !important;
 }