.

templates/cards/_card_item.html

@@ -2,7 +2,7 @@
   <div class="toptrump-card">
     <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 %}');">
       {% if card.image %}
-        <img src="{{ card.image.url }}" alt="{{ card.name }}" style="display:block;margin:16px auto 0; max-width:72%; height:auto; object-fit:cover; box-shadow:0 4px 12px rgba(0,0,0,0.3); border-radius:6px;">
+        <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}">
       {% endif %}
     </div>
     <div class="title-band">{{ card.name }}</div>

templates/cards/_form.html

@@ -63,10 +63,42 @@
   <div class="field">
     <label class="label">{{ form.background.label }}</label>
     <div class="control">
-      <div class="select is-fullwidth">{{ form.background }}</div>
-      <p class="help">Optional: choose a background image to use for this card.</p>
+      <div style="display:none">{{ form.background }}</div>
+      <div class="background-picker">
+        <div class="bg-options">
+          <div class="bg-option" data-bg-id="" role="button" tabindex="0">Use site default</div>
+          {% for bg in backgrounds %}
+            <div class="bg-option{% if form.instance.background and form.instance.background.pk == bg.pk %} selected{% endif %}" data-bg-id="{{ bg.pk }}" title="{{ bg.title|default:'Background' }}">
+              <img src="{{ bg.image.url }}" alt="{{ bg.title }}">
+            </div>
+          {% endfor %}
+        </div>
+        <p class="help">Optional: choose a background image to use for this card.</p>
+      </div>
     </div>
   </div>
+  <script>
+    (function(){
+      const script = document.currentScript;
+      const root = script && script.parentElement ? script.parentElement : document;
+      const picker = root.querySelector('.background-picker');
+      if(!picker) return;
+      const select = root.querySelector('select[name="background"]');
+      const options = picker.querySelectorAll('.bg-option');
+      function clearSelected(){ options.forEach(o=>o.classList.remove('selected')); }
+      options.forEach(function(opt){
+        opt.addEventListener('click', function(){
+          const id = opt.getAttribute('data-bg-id');
+          clearSelected();
+          opt.classList.add('selected');
+          if(select){ select.value = id || '';
+            // dispatch change for any listeners
+            select.dispatchEvent(new Event('change', { bubbles: true }));
+          }
+        });
+      });
+    })();
+  </script>
   <script>
     (function(){
       const script = document.currentScript;

templates/cards/base.html

@@ -34,6 +34,23 @@
       /* Top Trumps card styles */
       .toptrump-card{max-width:320px;border-radius:10px;overflow:hidden;background:var(--card-bg);color:var(--text);box-shadow:0 6px 18px rgba(0,0,0,0.12);border:1px solid rgba(0,0,0,0.06)}
       .toptrump-card .hero-image{height:180px;background-size:cover;background-position:center}
+      /* Hero image: make the dinosaur image larger, cover the banner and remove shadow */
+      .toptrump-card .hero-image img.card-hero-img{
+        display:block;
+        margin:8px auto 0;
+        width:92%;
+        height:140px;
+        object-fit:cover;
+        border-radius:6px;
+        box-shadow:none;
+      }
+      /* Background picker thumbnails */
+      .background-picker{margin-top:0.5rem}
+      .background-picker .bg-options{display:flex;gap:0.5rem;flex-wrap:wrap}
+      .background-picker .bg-option{width:64px;height:48px;border:1px solid rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff;color:#222;padding:4px;border-radius:4px}
+      .background-picker .bg-option img{max-width:100%;max-height:100%;display:block;border-radius:2px}
+      .background-picker .bg-option.selected{outline:2px solid var(--accent);box-shadow:0 2px 6px rgba(0,0,0,0.08)}
+      .background-picker .bg-option[role="button"]{font-size:0.8rem;padding:6px 8px}
       .toptrump-card .title-band{background:var(--accent);color:#072027;padding:0.6rem 0.75rem;text-align:center;font-weight:700;font-size:1.05rem}
       .toptrump-card .card-body{padding:0.75rem}
       .toptrump-card .stat-row{display:flex;align-items:center;gap:0.75rem;padding:0.25rem 0}