diff --git a/src/js/popups/custom-background-filter.js b/src/js/popups/custom-background-filter.js index 3f3ddf0a4..aa4b99c02 100644 --- a/src/js/popups/custom-background-filter.js +++ b/src/js/popups/custom-background-filter.js @@ -34,9 +34,15 @@ export function getCSS() { export function apply() { let filterCSS = getCSS(); - $(".customBackground").css({ + let css = { filter: filterCSS, - }); + width: `calc(100% + ${filters.blur.value * 4}rem)`, + height: `calc(100% + ${filters.blur.value * 4}rem)`, + left: `-${filters.blur.value * 2}rem`, + top: `-${filters.blur.value * 2}rem`, + position: "absolute", + }; + $(".customBackground img").css(css); } function syncSliders() { diff --git a/src/js/theme-controller.js b/src/js/theme-controller.js index 2f9d31047..ec69daf63 100644 --- a/src/js/theme-controller.js +++ b/src/js/theme-controller.js @@ -165,10 +165,11 @@ export function clearRandom() { } export function applyCustomBackground() { - $(".customBackground").css({ - backgroundImage: `url(${Config.customBackground})`, - backgroundAttachment: "fixed", - }); + // $(".customBackground").css({ + // backgroundImage: `url(${Config.customBackground})`, + // backgroundAttachment: "fixed", + // }); + $(".customBackground").html(``); if (Config.customBackground === "") { $("#words").removeClass("noErrorBorder"); } else { @@ -178,12 +179,14 @@ export function applyCustomBackground() { export function applyCustomBackgroundSize() { if (Config.customBackgroundSize == "max") { - $(".customBackground").css({ - backgroundSize: "100% 100%", + $(".customBackground img").css({ + // width: "calc(100%)", + // height: "calc(100%)", + objectFit: "", }); } else if (Config.customBackgroundSize != "") { - $(".customBackground").css({ - backgroundSize: Config.customBackgroundSize, + $(".customBackground img").css({ + objectFit: Config.customBackgroundSize, }); } } diff --git a/src/sass/style.scss b/src/sass/style.scss index 049462ae0..c0294bfbd 100644 --- a/src/sass/style.scss +++ b/src/sass/style.scss @@ -141,6 +141,9 @@ body { background-position: center center; background-repeat: no-repeat; z-index: -999; + justify-content: center; + align-items: center; + display: flex; } html {