Fix fixed background issue

3 files changed, 13 insertions, 7 deletions

diff --git a/src/App.js b/src/App.js
index 83a61d39..23f6cb78 100644
--- a/src/App.js
+++ b/src/App.js
@@ -66,9 +66,8 @@ export default {
       })
     },
     logo () { return this.$store.state.instance.logo },
-    style () {
+    bgStyle () {
       return {
-        '--body-background-image': `url(${this.background})`,
         'background-image': `url(${this.background})`
       }
     },
diff --git a/src/App.scss b/src/App.scss
index d3721b32..dedc294d 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,15 +1,21 @@
 @import './_variables.scss';
 
 #app {
-  background-size: cover;
-  background-attachment: fixed;
-  background-repeat: no-repeat;
-  background-position: 0 50px;
   min-height: 100vh;
   max-width: 100%;
   overflow: hidden;
 }
 
+.app-bg-wrapper {
+  position: fixed;
+  z-index: -1;
+  height: 100%;
+  width: 100%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 0 50%;
+}
+
 i {
   user-select: none;
 }
diff --git a/src/App.vue b/src/App.vue
index 833608ea..8a4e02c4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,6 @@
 <template>
-  <div id="app" v-bind:style="style">
+  <div id="app">
+    <div class="app-bg-wrapper" v-bind:style="bgStyle"></div>
     <nav class='nav-bar container' @click="scrollToTop()" id="nav">
       <div class='logo' :style='logoBgStyle'>
         <div class='mask' :style='logoMaskStyle'></div>