fix-attempt 3 on issue 59

src/App.vue

@@ -1,4 +1,5 @@
 <template>
+  <img alt="" class="bg-img" src="">
   <header>
     <Nav/>
   </header>

src/scss/classes.scss

@@ -23,6 +23,16 @@
   mask-size: 200% 100%;
   animation: placeholder-wave-alt 2.5s linear infinite;
 }
+
+.bg-img {
+  z-index: -1;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  overflow: hidden;
+}
+
 @keyframes placeholder-wave-alt {
   100% {
     mask-position: -200% 0%;

src/views/Explore.vue

@@ -1,6 +1,4 @@
 <template>
-  <img alt="" class="bg-img" src="">
-
   <div class="wrapper">
     <div class="container-lg text-center">
       <h3>Recent matches</h3>
@@ -73,6 +71,7 @@ export default {
       // }
 
       document.getElementById('app').style.background = 'rgba(0, 0, 0, .7)'
+      document.querySelector('.bg-img').style.display = 'initial'
     })
 
     onBeforeUnmount(() => {
@@ -92,15 +91,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.bg-img {
-  z-index: -1;
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  overflow: hidden;
-}
-
 .container-lg {
   padding: 2rem;
 

src/views/Home.vue

@@ -98,6 +98,7 @@ export default {
       store.commit('resetPlayerDetails')
 
       document.getElementById('app').style.background = 'none'
+      document.querySelector('.bg-img').style.display = 'none'
     })
 
     return {recentVisited, GoToPlayer, removeRecentVisited}

src/views/Match.vue

@@ -1,7 +1,5 @@
 <template>
   <div class="overlay" :style="{minHeight: pHeight + 'px'}">
-    <img alt="" class="bg-img" src="">
-
     <div class="match-wrapper">
       <div class="head row m-auto text-center">
         <div class="map-score">
@@ -341,6 +339,7 @@ export default {
       scoreWrapper.style.minHeight = height + 'px'
 
       document.getElementById('app').style.background = 'linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.85) 30%, rgba(0, 0, 0, 0.85) 70%, rgba(0, 0, 0, .6) 100%)'
+      document.querySelector('.bg-img').style.display = 'initial'
     })
 
     window.onresize = () => {
@@ -359,15 +358,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.bg-img {
-  z-index: -1;
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  overflow: hidden;
-}
-
 .head {
   height: 230px;
   background: linear-gradient(90deg,

src/views/Player.vue

@@ -1,6 +1,4 @@
 <template>
-  <img alt="" class="bg-img" src="">
-
   <div class="wrapper" :style="{minHeight: pHeight + 'px'}">
     <div class="container-lg">
       <div v-if="store.state.playerDetails.name">
@@ -367,6 +365,7 @@ export default {
       // console.log(store.state.playerDetails)
 
       document.getElementById('app').style.background = 'rgba(0, 0, 0, .7)'
+      document.querySelector('.bg-img').style.display = 'initial'
     })
 
     onBeforeUnmount(() => {
@@ -407,15 +406,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.bg-img {
-  z-index: -1;
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  overflow: hidden;
-}
-
 .wrapper {
   .load-more {
     padding: 1rem 0;