Refactored scss background images

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>