fixed custom background blur borders

closes #1630

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

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(`<img src="${Config.customBackground}"></img>`);
   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,
     });
   }
 }

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 {