Refactored scss background images

src/assets/scss/_global.scss

@@ -70,6 +70,15 @@ hr {
   border-color: rgba($white, .2);
 }
 
+.fs-icon {
+  width: 50px;
+  height: 50px;
+  &.icon-sm {
+    width: 20px;
+    height: 20px;
+  }
+}
+
 .btn {
   display: inline-block;
   padding: 13px 33px;
@@ -119,11 +128,28 @@ hr {
   }
 }
 
-.fs-icon {
+.bg-image {
-  width: 50px;
+  position: relative;
-  height: 50px;
+  &:after {
-  &.icon-sm {
+    display: block;
-    width: 20px;
+    content: "";
-    height: 20px;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-size: cover;
+    background-attachment: fixed;
+    z-index: -1;
+    opacity: 33%;
+    pointer-events: none;
+  }
+  &.bg-fade-in {
+    &:after {
+      width: 120vw;
+      opacity: 0;
+      animation: fadeInBg 2s ease-out 0s 1 forwards,
+      paneBgAround 35s ease-in-out 0s infinite forwards;
+    }
   }
 }

src/views/Home.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="home">
+  <section class="home bg-image bg-fade-in">
     <div class="splash fade-in-children">
       <h2 class="heading-1">Full Skies</h2>
       <p class="heading-2">
@@ -31,20 +31,7 @@ export default defineComponent({
   overflow: hidden;
 
   &:after {
-    display: block;
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 120vw;
     background-image: url("/home_bg-min.jpg");
-    background-size: cover;
-    z-index: -1;
-    opacity: 0;
-    pointer-events: none;
-    animation: fadeInBg 2s ease-out 0s 1 forwards,
-      paneBgAround 35s ease-in-out 0s infinite forwards;
   }
 }
 </style>

src/views/celestials/Celestial.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="celestial">
+  <section class="celestial bg-image">
     <header>
       <h1 class="heading-1">{{ celestial.name }}</h1>
     </header>
@@ -59,3 +59,15 @@ export default defineComponent({
   }
 });
 </script>
+
+<style lang="scss" scoped>
+.celestial {
+  position: relative;
+  min-height: 100%;
+  padding: 25px 5%;
+
+  &:after {
+    background-image: url("/celestials_bg-min.jpg");
+  }
+}
+</style>

src/views/celestials/Celestials.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="celestials">
+  <section class="celestials bg-image">
     <header>
       <h1 class="heading-1">Le système solaire</h1>
     </header>
@@ -77,19 +77,7 @@ export default defineComponent({
   padding: 25px 5%;
 
   &:after {
-    display: block;
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
     background-image: url("/celestials_bg-min.jpg");
-    background-size: cover;
-    background-attachment: fixed;
-    z-index: -1;
-    opacity: 33%;
-    pointer-events: none;
   }
 }
 </style>