.

cards/templates/cards/_card_hero_styles.html

@@ -0,0 +1,38 @@
+<style>
+  /* Shared hero image rules used by both preview (base.html) and printable view */
+  .toptrump-card .hero-image{height:180px;background-size:cover;background-position:center;position:relative;overflow:hidden}
+
+  /* For most designs center the dino image absolutely and allow an inline
+     scale transform (the fragments provide `transform: translate(...) scale(...)`). */
+  .toptrump-card:not(.design-4) .hero-image img.card-hero-img {
+    position:absolute;
+    left:50%;
+    top:50%;
+    transform:translate(-50%,-50%);
+    min-width:110%;
+    min-height:110%;
+    width:auto;
+    height:auto;
+    object-fit:cover;
+    border-radius:6px;
+    box-shadow:none;
+  }
+
+  /* Design-4 uses object-fit:contain and a different layout to avoid
+     horizontal cropping — preserve that behaviour. */
+  .toptrump-card.design-4 .hero-image{ overflow:hidden; display:flex; align-items:center; justify-content:center }
+  .toptrump-card.design-4 .card-hero-img{
+    position:static !important;
+    left:auto !important;
+    top:auto !important;
+    transform:none !important;
+    display:block;
+    margin:0 auto;
+    width:120% !important;
+    max-width:none !important;
+    max-height:120% !important;
+    object-position:center center !important;
+    height:auto;
+    object-fit:contain;
+  }
+</style>

cards/templates/cards/_card_inner_design1.html

@@ -7,7 +7,7 @@
       <img class="print-hero-bg" src="{{ card.background.image.url }}" alt="" aria-hidden="true" style="display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
     {% endif %}
     {% if card.image %}
-      <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="position:relative; top:50%; left:50%; transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:180px; z-index:1;">
+      <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:180px; z-index:1;">
     {% endif %}
   </div>
   <div class="title-band" style="background:#2a7ae2; color:white; padding:12px; font-weight:700; font-size:1.2rem; text-align:center">{{ card.name }}</div>

cards/templates/cards/_card_inner_design2.html

@@ -5,7 +5,7 @@
       <img class="print-hero-bg" src="{{ card.background.image.url }}" alt="" aria-hidden="true" style="display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
     {% endif %}
     {% if card.image %}
-      <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="position:relative; top:50%; left:50%; transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:200px; border-radius:6px; box-shadow:0 8px 20px rgba(0,0,0,0.6); z-index:1;">
+      <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:200px; border-radius:6px; box-shadow:0 8px 20px rgba(0,0,0,0.6); z-index:1;">
     {% endif %}
   </div>
   <div class="title-band" style="background:#0b2b2b; color:#9fffbf; padding:14px; font-weight:800; font-size:1.3rem; text-align:center">{{ card.name }}</div>

cards/templates/cards/_card_inner_design3.html

@@ -5,7 +5,7 @@
       <img class="print-hero-bg" src="{{ card.background.image.url }}" alt="" aria-hidden="true" style="display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
     {% endif %}
     {% if card.image %}
-      <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="position:relative; top:50%; left:50%; transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:160px; border-radius:8px; z-index:1;">
+      <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:160px; border-radius:8px; z-index:1;">
     {% endif %}
   </div>
   <div class="title-band" style="background:linear-gradient(90deg,#ffd54f,#ff7043); color:#222; padding:12px; font-weight:800; font-size:1.25rem; text-align:center">{{ card.name }}</div>

cards/templates/cards/base.html

@@ -124,6 +124,7 @@
       .modal .card-form .button.is-primary{min-width:110px}
       .modal .card-form .background-picker .bg-option{width:56px;height:40px}
     </style>
+    {% include 'cards/_card_hero_styles.html' %}
   </head>
   <body>
     <section class="section">

cards/templates/cards/printable.html

@@ -27,10 +27,43 @@
          because some browsers do not print CSS background-images by default. */
       .print-card .print-hero-bg{display:none}
       @media print{
+        /* Hide CSS background-images and show the <img> fallback for reliability */
         .print-card .hero-image{background-image:none !important}
         .print-card .print-hero-bg{display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
-        .print-card .toptrump-card{position:relative; z-index:1}
-        .print-card img.card-hero-img{position:relative; z-index:2}
+        /* Ensure card content layers above the fallback background */
+        .print-card .toptrump-card{position:relative; z-index:2}
+
+        /* For non-design-4 cards keep the same absolute centering used in preview
+           so the dinosaur image sits in the same place (the inline transform
+           for scale is preserved). We avoid setting `transform` here so an
+           inline `transform` (translate+scale) in the fragment will still apply. */
+        .print-card .toptrump-card:not(.design-4) .hero-image img.card-hero-img {
+          position:absolute;
+          left:50%;
+          top:50%;
+          transform-origin:center;
+          min-width:110%;
+          min-height:110%;
+          width:auto;
+          height:auto;
+          object-fit:cover;
+          z-index:3;
+        }
+
+        /* Design-4 uses a different layout (object-fit:contain) in preview; preserve that */
+        .print-card .toptrump-card.design-4 .card-hero-img{
+          position:static !important;
+          left:auto!important;
+          top:auto!important;
+          transform:none!important;
+          display:block;
+          margin:0 auto;
+          width:120% !important;
+          max-width:none !important;
+          max-height:120% !important;
+          object-fit:contain;
+          z-index:3;
+        }
       }
       /* Small caption */
       .caption{font-size:12px; color:#333; margin-top:6px}
@@ -40,6 +73,7 @@
         .no-print{display:none}
       }
     </style>
+    {% include 'cards/_card_hero_styles.html' %}
   </head>
   <body>
     <div style="display:flex; justify-content:space-between; align-items:center; padding:8px 12px;">