From 06cf76d724b8d2f145b14f05a59aac3bf453052b Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 30 Sep 2025 09:07:20 -0700
Subject: [PATCH] Fix: restore bg image to body again (#5828)

---
 src/pages/index.jsx    | 68 ++++++++++++++++++++++++------------------
 src/styles/globals.css | 12 --------
 2 files changed, 39 insertions(+), 41 deletions(-)

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 11ef0266c..c8d0c0f1d 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -540,38 +540,48 @@ export default function Wrapper({ initialSettings, fallback }) {
       html.classList.add(desiredThemeClass);
     }
 
-    // Remove any previously applied inline styles
-    body.style.backgroundImage = "";
-    body.style.backgroundColor = "";
-    body.style.backgroundAttachment = "";
+    if (backgroundImage) {
+      const safeBackgroundImage = backgroundImage.replace(/'/g, "\\'");
+      body.style.backgroundImage = `linear-gradient(rgb(var(--bg-color) / ${opacity}), rgb(var(--bg-color) / ${opacity})), url('${safeBackgroundImage}')`;
+      body.style.backgroundSize = "cover";
+      body.style.backgroundPosition = "center";
+      body.style.backgroundAttachment = "fixed";
+      body.style.backgroundRepeat = "no-repeat";
+      body.style.backgroundColor = "";
+    } else {
+      body.style.backgroundImage = "none";
+      body.style.backgroundColor = "rgb(var(--bg-color))";
+      body.style.backgroundSize = "";
+      body.style.backgroundPosition = "";
+      body.style.backgroundAttachment = "";
+      body.style.backgroundRepeat = "";
+    }
+
+    return () => {
+      body.style.backgroundImage = "";
+      body.style.backgroundColor = "";
+      body.style.backgroundSize = "";
+      body.style.backgroundPosition = "";
+      body.style.backgroundAttachment = "";
+      body.style.backgroundRepeat = "";
+    };
   }, [backgroundImage, opacity, theme, color, initialSettings.color]);
 
   return (
-    <>
-      {backgroundImage && (
-        <div
-          id="background"
-          aria-hidden="true"
-          style={{
-            backgroundImage: `linear-gradient(rgb(var(--bg-color) / ${opacity}), rgb(var(--bg-color) / ${opacity})), url('${backgroundImage}')`,
-          }}
-        />
-      )}
-      <div id="page_wrapper" className="relative h-full">
-        <div
-          id="inner_wrapper"
-          tabIndex="-1"
-          className={classNames(
-            "w-full h-full overflow-auto",
-            backgroundBlur &&
-              `backdrop-blur${initialSettings.background.blur?.length ? `-${initialSettings.background.blur}` : ""}`,
-            backgroundSaturate && `backdrop-saturate-${initialSettings.background.saturate}`,
-            backgroundBrightness && `backdrop-brightness-${initialSettings.background.brightness}`,
-          )}
-        >
-          <Index initialSettings={initialSettings} fallback={fallback} />
-        </div>
+    <div id="page_wrapper" className="relative min-h-screen">
+      <div
+        id="inner_wrapper"
+        tabIndex="-1"
+        className={classNames(
+          "w-full min-h-screen overflow-auto",
+          backgroundBlur &&
+            `backdrop-blur${initialSettings.background.blur?.length ? `-${initialSettings.background.blur}` : ""}`,
+          backgroundSaturate && `backdrop-saturate-${initialSettings.background.saturate}`,
+          backgroundBrightness && `backdrop-brightness-${initialSettings.background.brightness}`,
+        )}
+      >
+        <Index initialSettings={initialSettings} fallback={fallback} />
       </div>
-    </>
+    </div>
   );
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index ce3dddf80..ab5e4d793 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -30,18 +30,6 @@ body,
   height: 100%;
   margin: 0;
   padding: 0;
-  background-color: rgb(var(--bg-color));
-}
-
-#background {
-  position: fixed;
-  inset: 0;
-  z-index: 0;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: scroll;
-  pointer-events: none;
 }
 
 html,