style(home): update offer-presentation grids background

Author: Domar95

src/assets/images/background_grid.jpg

@@ -1,55 +1,47 @@
 <mat-grid-list [cols]="cols" [rowHeight]="rowHeight">
-  <mat-grid-tile
-    [style.backgroundImage]="'url(' + images[0] + ')'"
-  ></mat-grid-tile>
+  <mat-grid-tile [style.backgroundImage]="'url(' + images[0] + ')'"></mat-grid-tile>
 
-  <mat-grid-tile>
+  <mat-grid-tile class="tile-background">
     <div class="tile-content">
       Imprezy firmowe
       <button mat-flat-button [routerLink]="['/galeria/imprezy-firmowe']">
         Sprawdź
       </button>
-    </div></mat-grid-tile
-  >
-  <mat-grid-tile
-    [style.backgroundImage]="'url(' + images[1] + ')'"
-  ></mat-grid-tile>
+    </div>
+  </mat-grid-tile>
 
-  <mat-grid-tile>
+  <mat-grid-tile [style.backgroundImage]="'url(' + images[1] + ')'"></mat-grid-tile>
+
+  <mat-grid-tile class="tile-background">
     <div class="tile-content">
       Imprezy prywatne
       <button mat-flat-button [routerLink]="['/galeria/imprezy-prywatne']">
         Sprawdź
       </button>
-    </div></mat-grid-tile
-  >
-  <mat-grid-tile
-    [style.backgroundImage]="'url(' + images[2] + ')'"
-  ></mat-grid-tile>
+    </div>
+  </mat-grid-tile>
+
+  <mat-grid-tile [style.backgroundImage]="'url(' + images[2] + ')'"></mat-grid-tile>
 
-  <mat-grid-tile>
+  <mat-grid-tile class="tile-background">
     <div class="tile-content">
       Prezentacje
       <button mat-flat-button [routerLink]="['/galeria/prezentacje']">
         Sprawdź
       </button>
-    </div></mat-grid-tile
-  >
+    </div>
+  </mat-grid-tile>
 
-  <mat-grid-tile
-    [style.backgroundImage]="'url(' + images[3] + ')'"
-  ></mat-grid-tile>
+  <mat-grid-tile [style.backgroundImage]="'url(' + images[3] + ')'"></mat-grid-tile>
 
-  <mat-grid-tile>
+  <mat-grid-tile class="tile-background">
     <div class="tile-content">
       Imprezy plenerowe
       <button mat-flat-button [routerLink]="['/galeria/imprezy-plenerowe']">
         Sprawdź
       </button>
-    </div></mat-grid-tile
-  >
+    </div>
+  </mat-grid-tile>
 
-  <mat-grid-tile
-    [style.backgroundImage]="'url(' + images[4] + ')'"
-  ></mat-grid-tile>
-</mat-grid-list>
+  <mat-grid-tile [style.backgroundImage]="'url(' + images[4] + ')'"></mat-grid-tile>
+</mat-grid-list>

src/components/offer-presentation/offer-presentation-grids/offer-presentation-grids.component.html

@@ -13,3 +13,9 @@ mat-grid-tile {
   padding: 32px;
   gap: 22px;
 }
+
+.tile-background {
+  background: url("/assets/images/background_grid.jpg");
+  background-size: cover;
+  background-position: top;
+}