coup de polish

web/themes/erabletheme/scss/partials/_background.scss

@@ -1,7 +1,6 @@
 #background {
-  z-index: -1;
-  max-width: 99vw;
-  width: 100vw;
+  height: 98%;
+  width: 100%;
   overflow: hidden;
   position: absolute;
   top: 0;
@@ -10,6 +9,10 @@
     position: absolute;
     pointer-events: none;
   }
+  > div {
+    position: relative;
+    height: 80vh;
+  }
   #bg-top {
     /* #bg-1 {
       top: 5vh;
@@ -18,6 +21,12 @@
     #bg-3 {
       top: 13vh;
       left: -10vw;
+      width: 20vw;
+      z-index: 1;
+      @media screen and (min-width: $breakpoint_desktop) {
+        width: auto;
+        z-index: -1;
+      }
     }
     #bg-2 {
       top: 8vh;
@@ -27,6 +36,10 @@
       width: 20vw;
       top: 5vh;
       right: -10vw;
+      z-index: 1;
+      @media screen and (min-width: $breakpoint_desktop) {
+        z-index: -1;
+      }
     }
     /* #bg-4 {
       top: 18vh;
@@ -56,19 +69,35 @@
     }
   }
   #bg-bottom {
+    bottom: 0;
+    position: absolute;
     #bg-11 {
-      top: -70vh;
-      right: -5vw;
+      left: 0;
+      @media screen and (min-width: $breakpoint_desktop) {
+        left: 50vw;
+        bottom: 70vh;
+      }
     }
     #bg-10 {
       width: 110vw;
-      top: -150vh;
       left: 5vw;
+      bottom: 0;
+      @media screen and (min-width: $breakpoint_desktop) {
+        left: 0;
+        bottom: 20vh;
+      }
     }
     #bg-4 {
       transform: scaleX(-1);
-      top: -40vh;
       left: -45vw;
+      bottom: 5vh;
+      @media screen and (min-width: $breakpoint_tablet) {
+        bottom: 150vhvh;
+
+      }
+      @media screen and (min-width: $breakpoint_desktop) {
+        bottom: -8vh;
+      }
     }
   }
 }