.

cards/models.py

@@ -174,6 +174,33 @@ class Dinosaur(models.Model):
     def intelligence_orig(self):
         return self.intelligence
 
+    @property
+    def background_image_scale(self):
+        """Return a CSS background-size percentage influenced by the
+        dinosaur's stored height. Uses `height_percent()` to derive a
+        value in a reasonable range so larger dinosaurs get a larger
+        background image scale.
+
+        The result is a string like '60%'. Keep the value clamped to
+        avoid extremely small/large sizes.
+        """
+        try:
+            p = float(self.height_percent() or 0)
+        except Exception:
+            # fallback if something odd happens
+            p = 50.0
+        # Map height percent p (0..100) to a background-size percentage
+        # so that the largest dinosaurs (p ~= 100) show the whole image
+        # (100%), and the smallest dinosaurs (p ~= 0) are shown with a
+        # zoomed-in background (e.g. 300%). This gives p=100 -> min_scale,
+        # p=0 -> max_scale.
+        min_scale = 100
+        max_scale = 300
+        # Interpolate: scale = min_scale + (1 - p/100) * (max_scale - min_scale)
+        scale = int(round(min_scale + (1.0 - (p / 100.0)) * (max_scale - min_scale)))
+        scale = max(min_scale, min(max_scale, scale))
+        return f"{scale}%"
+
 
 class BackgroundImage(models.Model):
     """Background images used behind card renders.

cards/templates/cards/_card_item.html

@@ -1,6 +1,6 @@
 <article class="card-item" id="card-{{ card.pk }}">
   <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 %}');">
+    <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;">
       {% if card.image %}
         <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}">
       {% endif %}