Merge pull request #3222 from SillyTavern/bg-fitting Add background image fitting options

28c7dbbe1bb6c3d8797c50fa851a54d284471cec

Cohee <18619528+Cohee1207@users.noreply.github.com>

Signed

public/index.html+7 -0 Viewed

                             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+23 -0 Viewed

 export let background_settings = {
     name: '__transparent.png',
     url: generateUrlParameter('__transparent.png', false),
+    fitting: 'classic',
 };
 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);
+}
 /**

     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 () {

         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+35 -1 Viewed

     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;

     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;