.

cards/templates/cards/_card_inner_design5.html

@@ -1,5 +1,8 @@
 {# Shared inner fragment for Design 5 - core card markup only #}
-<div class="toptrump-card design-5" style="border-radius:6px; overflow:hidden; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,0.08);">
+<div class="toptrump-card design-5" style="border-radius:6px; overflow:hidden; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,0.08); position:relative;">
+  {% if card.background and card.background.image %}
+    <img class="print-hero-bg" src="{{ card.background.image.url }}" alt="" aria-hidden="true" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
+  {% endif %}
   <div style="padding:14px; display:flex; align-items:center; gap:12px;">
     <div style="flex:1">
       <div style="font-weight:800; font-size:1.3rem">{{ card.name }}</div>

cards/templates/cards/print.html

@@ -37,6 +37,12 @@
             </select>
           </div>
         </div>
+        <div style="display:flex; align-items:center; gap:8px;">
+          <label style="display:flex; align-items:center; gap:6px; margin-top:18px;">
+            <input id="select-all-cards" type="checkbox">
+            <span class="is-size-7">Select all / none</span>
+          </label>
+        </div>
         <div style="margin-left:auto">
           <button class="button is-primary" type="submit">Open printable view</button>
         </div>
@@ -143,6 +149,29 @@
         var scaleInput = qs('input[name="scale"]');
         if(sel) sel.addEventListener('change', updatePreview);
         if(scaleInput) scaleInput.addEventListener('input', updatePreview);
+
+        // Select all / none handling for card checkboxes
+        var selectAll = qs('#select-all-cards');
+        function updateSelectAllState(){
+          var boxes = qsa('input[type="checkbox"][name="cards"]');
+          if(!selectAll || !boxes.length) return;
+          var checkedCount = boxes.filter(function(b){ return b.checked; }).length;
+          selectAll.checked = (checkedCount === boxes.length);
+          selectAll.indeterminate = (checkedCount > 0 && checkedCount < boxes.length);
+        }
+        // initialize state
+        updateSelectAllState();
+        if(selectAll){
+          selectAll.addEventListener('change', function(){
+            var boxes = qsa('input[type="checkbox"][name="cards"]');
+            boxes.forEach(function(b){ b.checked = selectAll.checked; });
+            selectAll.indeterminate = false;
+          });
+        }
+        // Keep select-all updated when individual checkboxes change
+        qsa('input[type="checkbox"][name="cards"]').forEach(function(b){
+          b.addEventListener('change', updateSelectAllState);
+        });
         // Hide/show controls for the floating panel
         var hideBtn = qs('#sample-hide-btn');
         var panel = qs('#sample-panel');

cards/templates/cards/printable.html

@@ -41,6 +41,8 @@
       /* 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}
+      /* DEBUG: temporarily force fallback <img> visible in all modes to verify rendering */
+      .print-card .print-hero-bg.debug-force-visible{display:block !important; outline:2px solid rgba(255,0,0,0.8);}
       @media print{
         /* Hide CSS background-images and show the <img> fallback for reliability */
         .print-card .hero-image{background-image:none !important}
@@ -137,4 +139,16 @@
       </div>
     {% endfor %}
   </body>
+  <script>
+    // Debug helper: add `debug-force-visible` to print fallback images when ?debug_print=1
+    (function(){
+      try{
+        if(window.location.search.indexOf('debug_print=1') !== -1){
+          document.addEventListener('DOMContentLoaded', function(){
+            Array.from(document.querySelectorAll('.print-card .print-hero-bg')).forEach(function(img){ img.classList.add('debug-force-visible'); });
+          });
+        }
+      }catch(e){}
+    })();
+  </script>
 </html>