Fix header background position logic on scroll

Updated the header's background position calculation to use string concatenation for `inverseYPos` and introduced dynamic adjustment of `inverseYPos` on scroll. This ensures smoother and more accurate background position updates.

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 = '';
     }