adding latest

src/components/LoginFull.vue

@@ -1,7 +1,7 @@
 <template>
   <video-background
     :src="video"
-    style=" height: 100vh;"
+    style="height: 100vh;"
     overlay="linear-gradient(to right, #05193799, #10183d90, #1e164090, #2b114290, #39094190)"
   >
   <LoginForm class=""></LoginForm>

src/views/Playground.vue

@@ -1,18 +1,19 @@
 <template>
   <div>
-    <v-container fluid fill-height class="mr-0 pr-0 mt-0 pt-0">
-      <v-img
-        src="../assets/images/background.svg"
-        height="100vh"
+    <v-container fluid class="ma-0 pa-0 full-screen d-flex">
+      <img
+        src="../assets/images/newbackground.png"
         width="auto"
-        contain="false"
-        position="bottom 0px right 0px"
-      ></v-img>
-    </v-container>
-    <v-container>
-      <div style="position: relative; z-index: 1">
+        style=""
+        class="d-flex align-end ma-0 pa-0 justify-end new-background-image"
+      />
+      <v-container
+        fill-height
+        class="d-flex align-center"
+        style="position: relative; z-index: 10;"
+      >
         <v-row>
-          <v-col>
+          <v-col class="d-flex justify-center">
             <h1 class="display-2">Playground</h1>
           </v-col>
         </v-row>
@@ -23,19 +24,83 @@
         </v-row>
         <v-row>
           <v-col>
-            <h1 class="display-2">Playground</h1>
+            <h1 class="display-2">{{ viewportHeight - 64 }}</h1>
+          </v-col>
+          <v-col>
+            <h1 class="display-2">{{ viewportWidth }}</h1>
+          </v-col>
+          <v-col>
+            <h1 class="display-2">{{ backgroundWidth }}</h1>
           </v-col>
         </v-row>
-        <v-row>
-          <v-col> </v-col>
-        </v-row>
-      </div>
+      </v-container>
     </v-container>
   </div>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      viewportHeight: window.innerHeight,
+      viewportWidth: window.innerWidth,
+      backgroundWidth: ""
+    };
+  },
+  created() {
+    window.addEventListener("resize", this.updateHeight);
+    window.addEventListener("resize", this.updateWidth);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.updateHeight);
+    window.addEventListener("resize", this.updateWidth);
+  },
+  mounted() {
+    this.getBackgroundWidth();
+  },
+  methods: {
+    updateHeight() {
+      this.viewportHeight = window.innerHeight;
+    },
+    updateWidth() {
+      this.viewportWidth = window.innerWidth;
+    },
+    getBackgroundWidth() {
+      var background = document.querySelector("#backgroundsvg");
+      this.backgroundWidth = background.clientWidth;
+    }
+  }
+};
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.full-screen {
+  height: calc(100vh - 64px);
+}
+
+.image-wrapper {
+  overflow: hidden;
+}
+
+img.new-background-image {
+  max-height: calc(100vh - 64px);
+  position: absolute;
+  height: 100%;
+  max-width: 1115px;
+  right: 0;
+  // left: 500px;
+}
+
+.background-image {
+  position: absolute;
+  height: calc(100vh - 64px);
+  // width: 100%;
+  max-width: 1115px;
+  right: 0;
+  z-index: 1;
+  border-style: dashed;
+  object-fit: cover;
+  object-position: right top;
+  overflow: hidden;
+}
+</style>