From 45dc3f7935f6b0d3800f64b7c8ac08281910a847 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Wed, 18 Dec 2024 11:15:49 +0800
Subject: [PATCH] fix: custom background position on mobile

---
 src/App.tsx | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 93500e5..836a40e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -46,18 +46,19 @@ const App: React.FC = () => {
 
   return (
     <Router basename={import.meta.env.BASE_URL}>
+      {/* 固定定位的背景层 */}
+      {customBackgroundImage && (
+        <div
+          className="fixed inset-0 z-0 bg-cover min-h-lvh bg-no-repeat bg-center"
+          style={{ backgroundImage: `url(${customBackgroundImage})` }}
+        />
+      )}
       <div
-        className={cn(
-          "flex min-h-screen w-full flex-col bg-cover bg-no-repeat bg-center bg-fixed",
-          {
-            "bg-background": !customBackgroundImage,
-          },
-        )}
-        style={{
-          backgroundImage: customBackgroundImage ? `url(${customBackgroundImage})` : undefined,
-        }}
+        className={cn("flex min-h-screen w-full flex-col", {
+          "bg-background": !customBackgroundImage,
+        })}
       >
-        <main className="flex min-h-[calc(100vh-calc(var(--spacing)*16))] flex-1 flex-col gap-4 p-4 md:p-10 md:pt-8">
+        <main className="flex z-20 min-h-[calc(100vh-calc(var(--spacing)*16))] flex-1 flex-col gap-4 p-4 md:p-10 md:pt-8">
           <Header />
           <Routes>
             <Route path="/" element={<Server />} />