fix: fixed the background image on backgroundExtended

src/app/components/about-me/about-me.component.html

@@ -10,4 +10,4 @@
         </div>
     </div>
 </div>
-<app-footer></app-footer>
+<app-footer class="backgroundExtended"></app-footer>

src/app/components/contact/contact.component.html

@@ -50,4 +50,4 @@
     </div>
   </div>
 </div>
-<app-footer></app-footer>
+<app-footer class="backgroundExtended"></app-footer>

src/app/components/contact/contact.component.scss

@@ -6,7 +6,7 @@
 
   .formDiv{
     margin-left: 5%;
-    height: 50%;
+    height: 60%;
     width: 30%;
     display: flex;
     justify-content: center;

src/app/components/global/background/background.component.scss

 #circleContainer {
   width: 100%;
-  height: 100%;
+  min-height: 100%;
   background-color: #000000;
   font-family: Helvetica, serif;
   z-index: 0;
@@ -10,7 +10,7 @@
 
 .background-image {
   width: 100%;
-  height: 100%;
+  min-height: 100%!important;
   object-fit: cover;
   position: absolute;
   top: 0;
@@ -28,9 +28,22 @@
 }
 
 /* Tablet */
-@media (max-width: 1050px) and (min-width: 451px) {
+@media (max-width: 1050px) and (min-width: 650px) {
   .circle-div {
     width: 100px;
     height: 100px;
   }
 }
+:host(.backgroundExtended){
+  /* Tablet */
+  @media (max-width: 649px) and (min-width: 200px) {
+    .circle-div {
+      width: 100px;
+      height: 100px;
+    }
+
+    .background-image{
+      height: 120vh!important;
+    }
+  }
+}