.

cards/templates/cards/_card_inner_design1.html

@@ -1,9 +1,13 @@
 {# Shared inner fragment for Design 1 - core card markup only #}
 <div class="toptrump-card design-1" style="border-radius:8px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,0.12);">
   <div style="padding:8px; display:flex; gap:8px; justify-content:flex-end;"></div>
-  <div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; height:200px;">
+  <div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; height:200px; position:relative; overflow:hidden;">
+    {# Print fallback: actual <img> element that is hidden on screen but shown by `printable.html` via its print stylesheet. #}
+    {% if card.background and card.background.image %}
+      <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;">
+      <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;">
     {% 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

@@ -1,8 +1,11 @@
 {# Shared inner fragment for Design 2 - core card markup only #}
 <div class="toptrump-card design-2" style="border-radius:6px; overflow:hidden; background:#111; color:#eee;">
-  <div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; height:220px; filter:brightness(0.7);">
+  <div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; height:220px; filter:brightness(0.7); position:relative; overflow:hidden;">
+    {% if card.background and card.background.image %}
+      <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);">
+      <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;">
     {% 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

@@ -1,8 +1,11 @@
 {# Shared inner fragment for Design 3 - core card markup only #}
 <div class="toptrump-card design-3" style="border-radius:10px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.14);">
-  <div class="hero-image" style="background-image: linear-gradient(120deg,#ff7a18, #af002d), url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; height:200px; filter:brightness(0.9);">
+  <div class="hero-image" style="background-image: linear-gradient(120deg,#ff7a18, #af002d), url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; height:200px; filter:brightness(0.9); position:relative; overflow:hidden;">
+    {% if card.background and card.background.image %}
+      <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;">
+      <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;">
     {% 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/_card_inner_design4.html

@@ -11,6 +11,9 @@
       </div>
     </div>
     <div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size: {{ card.background_image_scale }}; background-position:center; flex:1; position:relative; padding:8px; overflow:hidden;">
+      {% if card.background and card.background.image %}
+        <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 %}
       <div style="position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:3; width:84%; max-width:420px;">
         <div style="background:rgba(0,0,0,0.55); padding:6px 10px; border-radius:999px; color:#fff; display:flex; align-items:center; justify-content:center;">
           <div style="width:100%; max-width:360px; display:flex; align-items:center; gap:8px;">

cards/templates/cards/printable.html

@@ -23,6 +23,15 @@
       /* Ensure hero images scale inside print cards */
       .print-card .hero-image{height:auto; min-height:40mm;}
       .print-card img.card-hero-img{max-width:100%; height:auto; object-fit:contain}
+      /* Print fallback: show actual <img> fallbacks (added into fragments) during printing
+         because some browsers do not print CSS background-images by default. */
+      .print-card .print-hero-bg{display:none}
+      @media print{
+        .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}
+      }
       /* Small caption */
       .caption{font-size:12px; color:#333; margin-top:6px}
       @media print{

cards/views.py

@@ -451,7 +451,11 @@ def print_preview(request):
     for i in range(0, len(ordered), per_page):
         pages.append(ordered[i:i+per_page])
 
-    return render(request, 'cards/printable.html', {'pages': pages, 'design': design, 'scale': scale})
+    # Include the active background (if any) so fragments that fall back to
+    # a global `background` variable can render correctly in the printable view.
+    background = BackgroundImage.get_active() if BackgroundImage.objects.exists() else None
+
+    return render(request, 'cards/printable.html', {'pages': pages, 'design': design, 'scale': scale, 'background': background})
 
 
 def _parse_pasted_input(text):