Add dynamic background image synchronization with main image

- Define CSS variable for background image in root element
- Create updateBackgroundImage function to sync background with main image
- Modify refreshImage to update both main and background images
- Maintain consistent gradient overlay for both images
- Keep existing 5-minute refresh interval

static/index.html

@@ -6,6 +6,9 @@
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📺</text></svg>">
     <title>memes-tv</title>
     <style>
+        :root {
+            --bg-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('_.jpeg');
+        }
         * {
             margin: 0;
             padding: 0;
@@ -27,7 +30,7 @@
             left: 0;
             width: 100%;
             height: 100%;
-            background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('_.jpeg');
+            background-image: var(--bg-image);
             background-size: cover;
             background-position: center;
             background-repeat: no-repeat;
@@ -50,9 +53,19 @@
 <script>
     const img = document.getElementById('image');
     
+    function updateBackgroundImage(url) {
+      // Update the background image with the same URL as the main image
+      document.documentElement.style.setProperty(
+        '--bg-image', 
+        `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${url}')`
+      );
+    }
+
     function refreshImage() {
       // Add timestamp to URL to bypass cache
-      img.src = img.src.split('?')[0] + '?t=' + new Date().getTime();
+      const newSrc = img.src.split('?')[0] + '?t=' + new Date().getTime();
+      img.src = newSrc;
+      updateBackgroundImage(newSrc);
     }
 
     // Refresh every 5 minutes