Merge pull request #3222 from SillyTavern/bg-fitting

Add background image fitting options

public/index.html

@@ -4713,6 +4713,13 @@
                             Background Image
                         </h3>
                         <input id="bg-filter" data-i18n="[placeholder]Filter" placeholder="Filter" class="text_pole flex1" type="search" />
+                        <select id="background_fitting" class="text_pole" data-i18n="[title]Background Fitting" title="Background Fitting">
+                            <option value="classic" data-i18n="Classic">Classic</option>
+                            <option value="cover" data-i18n="Cover">Cover</option>
+                            <option value="contain" data-i18n="Contain">Contain</option>
+                            <option value="stretch" data-i18n="Stretch">Stretch</option>
+                            <option value="center" data-i18n="Center">Center</option>
+                        </select>
                         <div id="auto_background" class="menu_button menu_button_icon" data-i18n="[title]Automatically select a background based on the chat context" title="Automatically select a background based on the chat context.">
                             <i class="fa-solid fa-wand-magic"></i>
                             <span data-i18n="Auto-select">Auto-select</span>

public/scripts/backgrounds.js

@@ -12,6 +12,7 @@ const LIST_METADATA_KEY = 'chat_backgrounds';
 export let background_settings = {
     name: '__transparent.png',
     url: generateUrlParameter('__transparent.png', false),
+    fitting: 'classic',
 };
 
 export function loadBackgroundSettings(settings) {
@@ -19,7 +20,12 @@ export function loadBackgroundSettings(settings) {
     if (!backgroundSettings || !backgroundSettings.name || !backgroundSettings.url) {
         backgroundSettings = background_settings;
     }
+    if (!backgroundSettings.fitting) {
+        backgroundSettings.fitting = 'classic';
+    }
     setBackground(backgroundSettings.name, backgroundSettings.url);
+    setFittingClass(backgroundSettings.fitting);
+    $('#background_fitting').val(backgroundSettings.fitting);
 }
 
 /**
@@ -470,6 +476,18 @@ function highlightNewBackground(bg) {
     flashHighlight(newBg);
 }
 
+/**
+ * Sets the fitting class for the background element
+ * @param {string} fitting Fitting type
+ */
+function setFittingClass(fitting) {
+    const backgrounds = $('#bg1, #bg_custom');
+    backgrounds.toggleClass('cover', fitting === 'cover');
+    backgrounds.toggleClass('contain', fitting === 'contain');
+    backgrounds.toggleClass('stretch', fitting === 'stretch');
+    backgrounds.toggleClass('center', fitting === 'center');
+}
+
 function onBackgroundFilterInput() {
     const filterValue = String($(this).val()).toLowerCase();
     $('#bg_menu_content > div').each(function () {
@@ -510,4 +528,9 @@ export function initBackgrounds() {
         helpString: 'Automatically changes the background based on the chat context using the AI request prompt',
     }));
 
+    $('#background_fitting').on('input', function () {
+        background_settings.fitting = String($(this).val());
+        setFittingClass(background_settings.fitting);
+        saveSettingsDebounced();
+    });
 }

public/style.css

@@ -141,7 +141,7 @@ body {
     height: 100dvh;
     /*defaults as 100%, then reassigned via JS as pixels, will work on PC and Android*/
     /*height: calc(var(--doc-height) - 1px);*/
-    background-color: var(--greyCAIbg);
+    background-color: var(--SmartThemeBlurTintColor);
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;
@@ -519,6 +519,40 @@ hr {
     transition: background-image 0.5s ease-in-out;
 }
 
+/* Background fitting options */
+#background_fitting {
+    max-width: 6em;
+}
+
+/* Fill/Cover - scales to fill width while maintaining aspect ratio */
+#bg1.cover,
+#bg_custom.cover {
+    background-size: cover;
+    background-position: center;
+}
+
+/* Fit/Contain - shows entire image maintaining aspect ratio */
+#bg1.contain,
+#bg_custom.contain {
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+/* Stretch - stretches to fill entire space */
+#bg1.stretch,
+#bg_custom.stretch {
+    background-size: 100% 100%;
+}
+
+/* Center - centers without scaling */
+#bg1.center,
+#bg_custom.center {
+    background-size: auto;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
 body.reduced-motion #bg1,
 body.reduced-motion #bg_custom {
     transition: none;