diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 9109b4bd3..c243c3ff4 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -554,48 +554,38 @@ export default function Wrapper({ initialSettings, fallback }) {
       html.classList.add(desiredThemeClass);
     }
 
-    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 = "";
-    };
+    // Remove any previously applied inline styles
+    body.style.backgroundImage = "";
+    body.style.backgroundColor = "";
+    body.style.backgroundAttachment = "";
   }, [backgroundImage, opacity, theme, color, initialSettings.color]);
 
   return (
-    <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} />
+    <>
+      {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>
-    </div>
+    </>
   );
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index ab5e4d793..ce3dddf80 100644
--- a/src/styles/globals.css
+++ b/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,