Revert "Fix: restore bg image to body again (#5828)"

This reverts commit 06cf76d724.

src/pages/index.jsx

@@ -554,40 +554,29 @@ export default function Wrapper({ initialSettings, fallback }) {
       html.classList.add(desiredThemeClass);
     }
 
-    if (backgroundImage) {
+    // Remove any previously applied inline styles
-      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 (
-    <div id="page_wrapper" className="relative min-h-screen">
+    <>
+      {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 min-h-screen overflow-auto",
+            "w-full h-full overflow-auto",
             backgroundBlur &&
               `backdrop-blur${initialSettings.background.blur?.length ? `-${initialSettings.background.blur}` : ""}`,
             backgroundSaturate && `backdrop-saturate-${initialSettings.background.saturate}`,
@@ -597,5 +586,6 @@ export default function Wrapper({ initialSettings, fallback }) {
           <Index initialSettings={initialSettings} fallback={fallback} />
         </div>
       </div>
+    </>
   );
 }

src/styles/globals.css

@@ -30,6 +30,18 @@ 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,