Add background to map cards

Author: Deflaktor

_includes/mapCard.html

@@ -4,7 +4,8 @@
 <div class="col-md-4 mb-5">
   <div class="card h-100">
     <div class="relative-container">
-      <a href="{{ include.map.url | relative_url }}"><img class="card-img-top" src="{{ gpffd_png_file.name }}" style="width:100%;height:400px;object-fit: contain;" class="w3-hover-opacity"></a>
+      <a href="{{ include.map.url | relative_url }}"><img class="card-img-top map-card-image-board" src="{{ gpffd_png_file.name }}"></a>
+      <img class="card-img-top map-card-image-background" src="backgrounds/{{ include.map.background }}.webp">
       <div class="top-right-absolute">
         {% if include.map.changeLog -%}
         {%- assign firstChange = include.map.changeLog | first -%}

_layouts/default.html

@@ -19,27 +19,48 @@
     position: absolute;
     bottom: 8px;
     left: 16px;
+    z-index: 3;
   }
   .top-left-absolute {
     position: absolute;
     top: 8px;
     left: 16px;
+    z-index: 3;
   }
   .top-right-absolute {
     position: absolute;
     top: 8px;
     right: 16px;
+    z-index: 3;
   }
   .bottom-right-absolute {
     position: absolute;
     bottom: 8px;
     right: 16px;
+    z-index: 3;
   }
   .centered-absolute {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
+    z-index: 3;
+  }
+  .map-card-image-board {
+    width:100%;
+    height:400px;
+    object-fit:contain;
+    position:absolute;
+    filter: drop-shadow(0 0 6px #000b);
+    z-index: 2;
+  }
+  .map-card-image-background {
+    width:100%;
+    height:400px;
+    object-fit:cover;
+    position:relative;
+    filter: blur(1px) grayscale(50%) contrast(50%) opacity(50%);
+    z-index: 1;
   }
 </style>
 </head>