From 9ad991a70e7f789d326a115602ba0e97045ba9da Mon Sep 17 00:00:00 2001
From: Chris Chen <yuanson.ch@gmail.com>
Date: Wed, 5 Nov 2025 17:28:00 -0800
Subject: [PATCH] WIP

---
 .../hero-dashboard/hero-dashboard.component.html       | 10 ++++++----
 .../hero-dashboard/hero-dashboard.component.scss       |  6 ++++++
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.html b/src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.html
index 0efc667..a1c0b48 100644
--- a/src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.html
+++ b/src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.html
@@ -27,8 +27,9 @@
                 <div class="hero-selection-content-area">
                     <div class="row no-gutters h-100">
                         <div class="col-6 hero-select-image-col">
-                            <div class="hero-select-image-wrapper">
-                                <img src="{{imgUrl('Heros/'+className+'.jpg')}}" class="hero-select-image"
+                            <div class="hero-select-image-wrapper"
+                                [style.background-image]="'url(' + imgUrl('/Mobs/BG.png') + ')'">
+                                <img src="{{imgUrl('Heros/'+className+'.png')}}" class="hero-select-image"
                                     alt="{{currentSelectingHero.name}}">
                                 <!-- HP and Mana Bars -->
                                 <div class="hero-select-stats-overlay">
@@ -92,8 +93,9 @@
                         <div class="hero-card-content">
                             <div class="row no-gutters h-100">
                                 <div class="col-6 hero-image-col">
-                                    <div class="hero-image-wrapper">
-                                        <img src="{{imgUrl('Heros/'+className+'.jpg')}}" class="hero-image"
+                                    <div class="hero-image-wrapper"
+                                        [style.background-image]="'url(' + imgUrl('/Mobs/BG.png') + ')'">
+                                        <img src="{{imgUrl('Heros/'+className+'.png')}}" class="hero-image"
                                             (click)="toggleFlip()" alt="{{hero.name}}">
                                         <!-- HP and Mana Bars -->
                                         <div class="hero-stats-overlay">
diff --git a/src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.scss b/src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.scss
index 17cc1de..b7ab7b8 100644
--- a/src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.scss
+++ b/src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.scss
@@ -246,6 +246,9 @@
     overflow: hidden;
     border-radius: 8px;
     background: #f8f9fa;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
     position: relative;
 }
@@ -469,6 +472,9 @@
     overflow: hidden;
     border-radius: 8px;
     background: #f8f9fa;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
     position: relative;
 }