Fix background image disappearing on large screens (#335)

* Fix background image disappearing on large screens

* refactor: updated value from px -> to vw/vh

* Refactor multiple-box-shadow function to use vw/vh units

demo/src/app/index.module.scss

@@ -1,93 +1,104 @@
-@function multiple-box-shadow($n) {
-    $value: '#{random(2000)}px #{random(2000)}px #FFF';
+@function multiple-box-shadow($n, $width, $height) {
+  $value: "#{random() * $width} #{random() * $height} #FFF";
 
-    @for $i from 2 through $n {
-        $value: '#{$value}, #{random(2000)}px #{random(2000)}px #FFF';
-    }
+  @for $i from 2 through $n {
+    $value: "#{$value}, #{random() * $width} #{random() * $height} #FFF";
+  }
 
-    @return unquote($value);
+  @return unquote($value);
 }
 
-$shadows-small: multiple-box-shadow(700);
-$shadows-medium: multiple-box-shadow(200);
-$shadows-big: multiple-box-shadow(100);
+@media (max-width: 1400px) {
+  $width: 1500px;
+  $height: 1500px;
+  $shadows-small: multiple-box-shadow(700, $width, $height);
+  $shadows-medium: multiple-box-shadow(200, $width, $height);
+  $shadows-big: multiple-box-shadow(100, $width, $height);
 
-
-.login {
+  .login {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
-    // background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
     background: url("../assets/background.jpg") no-repeat center center;
     background-size: cover;
     box-sizing: border-box;
+  }
+
+  .starts {
+    width: 1px;
+    height: 1px;
+    background: transparent;
+    box-shadow: $shadows-small;
+    animation: animStar 50s linear infinite;
+  }
+
+  .starts2 {
+    width: 2px;
+    height: 2px;
+    box-shadow: $shadows-medium;
+    animation: animStar 100s linear infinite;
+  }
+
+  .starts3 {
+    width: 3px;
+    height: 3px;
+    background: transparent;
+    box-shadow: $shadows-big;
+    animation: animStar 150s linear infinite;
+  }
+}
 
-    .starts {
-        width: 1px;
-        height: 1px;
-        background: transparent;
-        box-shadow: $shadows-small;
-        animation: animStar 50s linear infinite;
-
-        &:after {
-            content: " ";
-            position: absolute;
-            top: 2000px;
-            width: 1px;
-            height: 1px;
-            background: transparent;
-            box-shadow: $shadows-small
-        }
-    }
-
-    .starts2 {
-        width: 2px;
-        height: 2px;
-        box-shadow: $shadows-medium;
-        animation: animStar 100s linear infinite;
-
-        &:after {
-            content: " ";
-            position: absolute;
-            top: 2000px;
-            width: 2px;
-            height: 2px;
-            background: transparent;
-            box-shadow: $shadows-medium;
-        }
-    }
-
-    .starts3 {
-        width: 3px;
-        height: 3px;
-        background: transparent;
-        box-shadow: $shadows-big;
-        animation: animStar 150s linear infinite;
-
-        &:after {
-            content: " ";
-            position: absolute;
-            top: 2000px;
-            width: 3px;
-            height: 3px;
-            background: transparent;
-            box-shadow: $shadows-big;
-        }
-
-    }
+@media (min-width: 1400px) {
+  $width: 150vw;
+  $height: 150vh;
+  $shadows-small: multiple-box-shadow(700, $width, $height);
+  $shadows-medium: multiple-box-shadow(200, $width, $height);
+  $shadows-big: multiple-box-shadow(100, $width, $height);
 
+  .login {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: url("../assets/background.jpg") no-repeat center center;
+    background-size: cover;
+    box-sizing: border-box;
+  }
+
+  .starts {
+    width: 1px;
+    height: 1px;
+    background: transparent;
+    box-shadow: $shadows-small;
+    animation: animStar 50s linear infinite;
+  }
+
+  .starts2 {
+    width: 2px;
+    height: 2px;
+    box-shadow: $shadows-medium;
+    animation: animStar 100s linear infinite;
+  }
+
+  .starts3 {
+    width: 3px;
+    height: 3px;
+    background: transparent;
+    box-shadow: $shadows-big;
+    animation: animStar 150s linear infinite;
+  }
 }
 
-
 @keyframes animStar {
-    from {
-        transform: translateY(0px)
-    }
-
-    to {
-        transform: translateY(-2000px)
-    }
+  from {
+    transform: translateY(0px);
+  }
+  to {
+    transform: translateY(-2000px);
+  }
 }