Change picture according to device

Author: developer-junaid

src/styles/css/main.css

@@ -1,4 +1,25 @@
 @import "./fonts";
+@import "./variables";
+
+$mobile-image: "./../../images/hand_mobile.jpg";
+$pc-image: "./../../images/hand.jpg";
+
+@mixin backgroundChange($device) {
+  // background-position: center;
+  @if ($device == "mobile") {
+    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)),
+      url($mobile-image);
+    background-size: cover;
+    background-position: center;
+  }
+
+  @if ($device == "pc") {
+    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)),
+      url($pc-image);
+    background-position: center;
+    background-size: cover;
+  }
+}
 
 * {
   margin: 0;
@@ -10,9 +31,11 @@
 body {
   min-height: 100vh;
   width: 100%;
-  // background-image: url("./../../images/black-laptop.jpg");
-  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)),
-    url("./../../images/hand.jpg");
-  background-size: cover;
-  background-position: center;
+  @include backgroundChange("pc");
+}
+
+@media (max-height: $mobile-height) and (max-width: $mobile) {
+  body {
+    @include backgroundChange("mobile");
+  }
 }

src/styles/css/main.css.map

@@ -3,3 +3,4 @@ $accent-color: #d2d4dd;
 $secondary-color: rgba(145, 104, 28, 0.89);
 $mobile: 1000px;
 $mobile-height: 750px;
+