From 7da0aed466cb3fd566f4003e99dc57f8fd09cb69 Mon Sep 17 00:00:00 2001
From: jessikitty <jess.rogerson.29@outlook.com>
Date: Thu, 21 May 2026 10:18:41 +1000
Subject: [PATCH] feat: Use backgroundSize in slide rendering + buildBgStyle
 helper

---
 wwwroot/js/display.js | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/wwwroot/js/display.js b/wwwroot/js/display.js
index f1ae937..72390c7 100644
--- a/wwwroot/js/display.js
+++ b/wwwroot/js/display.js
@@ -19,19 +19,31 @@
         layerA.classList.add('active'); return;
     }
 
-    function renderSlide(slide, layer) {
+    function buildBgStyle(slide) {
         var bg = slide.backgroundColor || '#0a0a14';
-        var bgImg = slide.backgroundImage ? 'url(' + slide.backgroundImage + ')' : 'none';
-        var css = slide.customCss || '';
+        var bgSize = slide.backgroundSize || 'cover';
+        var style = 'background-color:' + bg + ';';
+        if (slide.backgroundImage) {
+            style += 'background-image:url(' + slide.backgroundImage + ');';
+            style += 'background-size:' + bgSize + ';';
+            style += 'background-position:center;';
+            style += 'background-repeat:no-repeat;';
+        }
+        if (slide.customCss) style += slide.customCss;
+        return style;
+    }
+
+    function renderSlide(slide, layer) {
+        var style = buildBgStyle(slide);
         if (slide.type === 'content') {
-            layer.innerHTML = '<div class="slide-inner" style="background-color:' + bg + ';background-image:' + bgImg + ';' + css + '"><div class="content-wrap">' + (slide.content || '') + '</div></div>';
+            layer.innerHTML = '<div class="slide-inner" style="' + style + '"><div class="content-wrap">' + (slide.content || '') + '</div></div>';
         } else if (slide.type === 'embed') {
-            layer.innerHTML = '<div class="slide-inner" style="background-color:' + bg + ';' + css + '"><iframe class="embed-frame" src="' + escapeHtml(slide.embedUrl || '') + '" sandbox="allow-scripts allow-same-origin allow-popups" loading="lazy"></iframe></div>';
+            layer.innerHTML = '<div class="slide-inner" style="' + style + '"><iframe class="embed-frame" src="' + escapeHtml(slide.embedUrl || '') + '" sandbox="allow-scripts allow-same-origin allow-popups" loading="lazy"></iframe></div>';
         } else if (slide.type === 'icscalendar') {
-            layer.innerHTML = '<div class="slide-inner" style="background-color:' + bg + ';' + css + '"><div class="ics-display"><h2>Upcoming Events</h2><div class="events-grid"><div class="loading-state">Loading calendar</div></div></div></div>';
+            layer.innerHTML = '<div class="slide-inner" style="' + style + '"><div class="ics-display"><h2>Upcoming Events</h2><div class="events-grid"><div class="loading-state">Loading calendar</div></div></div></div>';
             loadIcsEvents(slide.icsSource, layer);
         } else {
-            layer.innerHTML = '<div class="slide-inner" style="background-color:' + bg + ';"><div class="content-wrap">' + (slide.content || '') + '</div></div>';
+            layer.innerHTML = '<div class="slide-inner" style="' + style + '"><div class="content-wrap">' + (slide.content || '') + '</div></div>';
         }
     }