diff --git a/frontend/src/app/header/header.component.html b/frontend/src/app/header/header.component.html
index 0f80c4a..e459f18 100644
--- a/frontend/src/app/header/header.component.html
+++ b/frontend/src/app/header/header.component.html
@@ -1,12 +1,6 @@
-
-
-
-
-
-
 <ng-container>
   <header id="top"
-          [ngStyle]="{ 'background-image': getBackgroundImage(), 'height': height, 'background-position': center {{ inverseYPos }}px; }">
+          [ngStyle]="{ 'background-image': getBackgroundImage(), 'height': height, 'background-position': 'center ' + inverseYPos + 'px' }">
     <nav id="nav" [ngClass]="active">
       <div class="container">
         <div id="mobile_nav">
diff --git a/frontend/src/app/header/header.component.ts b/frontend/src/app/header/header.component.ts
index f9ce576..7cf5156 100644
--- a/frontend/src/app/header/header.component.ts
+++ b/frontend/src/app/header/header.component.ts
@@ -13,12 +13,14 @@ export class HeaderComponent {
   @Input() overlay_gradient: number = 0;
 
   public active: string = '';
+  public inverseYPos: number = 0;
 
   @HostListener('window:scroll', [])
   onWindowScroll(): void {
     const scrollPosition = window.scrollY;
     if (scrollPosition > 0) {
       this.active = 'active';
+      this.inverseYPos = (scrollPosition / 4) * -1;
     } else {
       this.active = '';
     }