fix: backgroud image becomes unstable when scrolling

this commit moves the backgroud related style attributes to <body> to fix it.
AOSC-Dev · Sep 23, 2024 · 8609409 · 8609409
1 parent 1ba0def
commit 8609409
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
       content="width=device-width, initial-scale=1" />
     <title>社区门户 | 安同开源社区 (AOSC)</title>
   </head>
-  <body>
+  <body class="bg-floral">
     <div id="app"></div>
     <script
       type="module"

diff --git a/src/pages/home/HomeIndex.vue b/src/pages/home/HomeIndex.vue
@@ -8,7 +8,7 @@ import { RouterView } from 'vue-router';
 <template>
   <div class="min-w-[960px] min-h-[100vh]">
     <div
-      class="bg-floral p-0 my-0 min-h-[100vh] flex flex-col">
+      class="p-0 my-0 min-h-[100vh] flex flex-col">
       <HeaderBar />
       <div
         class="main-content flex pb-[2.5rem] flex-1 justify-center">
@@ -32,12 +32,3 @@ import { RouterView } from 'vue-router';
     <FooterBar class="fixed bottom-0 h-[2rem]" />
   </div>
 </template>
-
-<style scoped>
-.bg-floral {
-  background-color: #fffbf5;
-  background-image: url(/assets/backgrounds/floral.svg);
-  background-position: center;
-  background-attachment: fixed;
-}
-</style>
diff --git a/src/style.css b/src/style.css
@@ -36,3 +36,10 @@ a:hover {
 .v-code-block--code {
   z-index: 0 !important;
 }
+
+body.bg-floral {
+  background-color: #fffbf5;
+  background-image: url(/assets/backgrounds/floral.svg);
+  background-position: center;
+  background-attachment: fixed;
+}