Make background opacity work

beango/css/beango.css

@@ -16,6 +16,8 @@ body {
 .bingo-board {
     display: grid;
     gap: 4px; /* Adjust gap as needed */
+    position: relative; /* Ensure it establishes a stacking context */
+    z-index: 1; /* Place above the container's ::before pseudo-element */
 }
 .centered {
     display: flex;
@@ -158,6 +160,25 @@ body {
 /* Basic styling for the board */
 #bingo-board-container {
     /* Background color/image/opacity set by JS */
+    position: relative; /* Needed for pseudo-element positioning */
+    overflow: hidden; /* Clip pseudo-element */
+}
+
+/* NEW: Pseudo-element for board background image */
+#bingo-board-container::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: var(--board-bg-image-url, none);
+    background-size: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
+    opacity: var(--board-bg-image-opacity, 1);
+    z-index: 0; /* Default layer, behind explicit z-index on board */
+    border-radius: inherit; /* Inherit border radius from container */
 }
 
 /* Styling for config pane sections */

beango/index.html

@@ -396,6 +396,12 @@
                         <label for="board-bg-image-url-input" class="block text-sm font-medium text-gray-700">Background Image URL (Optional):</label>
                         <input type="url" id="board-bg-image-url-input" name="board-bg-image-url-input" placeholder="Overrides background color" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm">
                          <p class="mt-1 text-xs text-gray-500">If set, opacity still applies to the image.</p>
+                         <!-- START Board Background Image Opacity Slider -->
+                         <div class="mt-1 w-28 flex flex-col items-center ml-auto">
+                            <label for="board-bg-image-opacity-slider" class="block text-xs font-medium text-gray-500">Image Opacity: <span id="board-bg-image-opacity-value">100</span>%</label>
+                            <input type="range" id="board-bg-image-opacity-slider" name="board-bg-image-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
+                        </div>
+                         <!-- END Board Background Image Opacity Slider -->
                     </div>
                 </div>
             </details>

beango/js/beango.js

@@ -45,6 +45,7 @@ const LS_MARKED_BORDER_WIDTH = 'beango_markedBorderWidth';
 const LS_BOARD_BG_COLOR = 'beango_boardBgColor';
 const LS_BOARD_BG_COLOR_OPACITY = 'beango_boardBgColorOpacity'; // (replaces LS_BOARD_BG_OPACITY)
 const LS_BOARD_BG_IMAGE_URL = 'beango_boardBgImageUrl';
+const LS_BOARD_BG_IMAGE_OPACITY = 'beango_boardBgImageOpacity'; // NEW
 const LS_MARKED_CELL_TEXT_COLOR = 'beango_markedCellTextColor';
 const LS_MARKED_CELL_TEXT_OPACITY = 'beango_markedCellTextOpacity';
 const LS_MARKED_CELL_OUTLINE_COLOR = 'beango_markedCellOutlineColor';
@@ -101,6 +102,7 @@ const DEFAULT_MARKED_BORDER_WIDTH = 0; // No border for marked cells
 const DEFAULT_BOARD_BG_COLOR = '#ffffff'; // Default white
 const DEFAULT_BOARD_BG_COLOR_OPACITY = 100; // (replaces DEFAULT_BOARD_BG_OPACITY)
 const DEFAULT_BOARD_BG_IMAGE_URL = ''; // Default no image
+const DEFAULT_BOARD_BG_IMAGE_OPACITY = 100; // NEW
 const DEFAULT_MARKED_CELL_TEXT_COLOR = '#000000'; // Keep black for readability
 const DEFAULT_MARKED_CELL_TEXT_OPACITY = 50;
 const DEFAULT_MARKED_CELL_OUTLINE_COLOR = '#ffffff';
@@ -742,6 +744,7 @@ function saveBoardBgSettings() {
     localStorage.setItem(LS_BOARD_BG_COLOR, document.getElementById('board-bg-color-picker').value);
     localStorage.setItem(LS_BOARD_BG_IMAGE_URL, document.getElementById('board-bg-image-url-input').value);
     localStorage.setItem(LS_BOARD_BG_COLOR_OPACITY, document.getElementById('board-bg-color-opacity-slider').value); // Use new ID & key
+    localStorage.setItem(LS_BOARD_BG_IMAGE_OPACITY, document.getElementById('board-bg-image-opacity-slider').value); // NEW
 }
 
 // --- Apply board background style ---
@@ -751,22 +754,19 @@ function applyBoardBgStyle() {
 
     const bgColor = localStorage.getItem(LS_BOARD_BG_COLOR) || DEFAULT_BOARD_BG_COLOR;
     const bgImageUrl = localStorage.getItem(LS_BOARD_BG_IMAGE_URL) || DEFAULT_BOARD_BG_IMAGE_URL;
-    const opacityValue = parseInt(localStorage.getItem(LS_BOARD_BG_COLOR_OPACITY) || DEFAULT_BOARD_BG_COLOR_OPACITY, 10);
+    const bgColorOpacity = parseInt(localStorage.getItem(LS_BOARD_BG_COLOR_OPACITY) || DEFAULT_BOARD_BG_COLOR_OPACITY, 10);
+    const bgImageOpacity = parseInt(localStorage.getItem(LS_BOARD_BG_IMAGE_OPACITY) || DEFAULT_BOARD_BG_IMAGE_OPACITY, 10); // NEW
 
-    // Apply opacity - REMOVED direct opacity setting
+    // Apply background color directly to the container
-    // container.style.opacity = opacityValue;
+    container.style.backgroundColor = hexToRgba(bgColor, bgColorOpacity);
 
-    // Apply background image or color
+    // Apply background image via CSS variables for the pseudo-element
-    if (bgImageUrl) {
+    if (bgImageUrl && bgImageUrl.trim() !== '') {
-        container.style.backgroundImage = `url('${bgImageUrl}')`;
+        container.style.setProperty('--board-bg-image-url', `url('${bgImageUrl}')`);
-        container.style.backgroundSize = 'cover';
+        container.style.setProperty('--board-bg-image-opacity', bgImageOpacity / 100);
-        container.style.backgroundPosition = 'center center';
-        container.style.backgroundRepeat = 'no-repeat';
-        // Apply background color with its opacity as fallback / see-through
-        container.style.backgroundColor = hexToRgba(bgColor, opacityValue);
     } else {
-        container.style.backgroundImage = 'none';
+        container.style.removeProperty('--board-bg-image-url');
-        container.style.backgroundColor = hexToRgba(bgColor, opacityValue);
+        container.style.removeProperty('--board-bg-image-opacity');
     }
 }
 
@@ -1353,10 +1353,11 @@ function restoreCellStyleSettings(savedCellBorderColor, savedCellBorderOpacity,
     _restoreInputSetting('cell-outline-width-input', savedCellOutlineWidth);
 }
 
-function restoreBoardBgSettings(savedBoardBgColor, savedBoardBgColorOpacity, savedBoardBgImageUrl) {
+function restoreBoardBgSettings(savedBoardBgColor, savedBoardBgColorOpacity, savedBoardBgImageUrl, savedBoardBgImageOpacity) {
     _restoreColorPickerSetting('board-bg-color-picker', savedBoardBgColor);
     _restoreInputSetting('board-bg-image-url-input', savedBoardBgImageUrl);
     _restoreOpacitySetting('board-bg-color-opacity-slider', 'board-bg-color-opacity-value', savedBoardBgColorOpacity);
+    _restoreOpacitySetting('board-bg-image-opacity-slider', 'board-bg-image-opacity-value', savedBoardBgImageOpacity); // NEW
     applyBoardBgStyle(); // Apply loaded style
 }
 
@@ -1450,6 +1451,7 @@ function loadFromLocalStorage() {
     const savedBoardBgColor = localStorage.getItem(LS_BOARD_BG_COLOR) || DEFAULT_BOARD_BG_COLOR;
     const savedBoardBgColorOpacity = localStorage.getItem(LS_BOARD_BG_COLOR_OPACITY) || DEFAULT_BOARD_BG_COLOR_OPACITY;
     const savedBoardBgImageUrl = localStorage.getItem(LS_BOARD_BG_IMAGE_URL) || DEFAULT_BOARD_BG_IMAGE_URL;
+    const savedBoardBgImageOpacity = localStorage.getItem(LS_BOARD_BG_IMAGE_OPACITY) || DEFAULT_BOARD_BG_IMAGE_OPACITY; // NEW
 
     // Restore Config Pane State
     loadPaneState(configIsOpen);
@@ -1491,7 +1493,7 @@ function loadFromLocalStorage() {
         savedCellBorderWidth
     );
 
-    restoreBoardBgSettings(savedBoardBgColor, savedBoardBgColorOpacity, savedBoardBgImageUrl);
+    restoreBoardBgSettings(savedBoardBgColor, savedBoardBgColorOpacity, savedBoardBgImageUrl, savedBoardBgImageOpacity); // Pass new value
 
     restoreSavedItems(savedDisplayedItems, savedItemsText, savedOriginalItemsText);
 
@@ -1703,6 +1705,7 @@ document.addEventListener('DOMContentLoaded', () => {
     setupInputListener('board-bg-color-picker', 'input', saveBoardBgSettings, applyBoardBgStyle);
     setupInputListener('board-bg-image-url-input', 'input', saveBoardBgSettings, applyBoardBgStyle);
     setupOpacitySliderListener('board-bg-color-opacity-slider', 'board-bg-color-opacity-value', saveBoardBgSettings, applyBoardBgStyle);
+    setupOpacitySliderListener('board-bg-image-opacity-slider', 'board-bg-image-opacity-value', saveBoardBgSettings, applyBoardBgStyle); // NEW
 
 
     // --- Search Listener ---