Fix background visibility by using settings.yaml background property and making Next.js wrappers transparent in custom.css

config-public/custom.css

@@ -8,6 +8,13 @@ body {
   background-size: cover !important;
   background-position: center !important;
   background-attachment: fixed !important;
+  background-repeat: no-repeat !important;
+}
+
+/* Force transparency on Homepage layout wrappers to prevent covering the background */
+#__next, #__next > div, main, .layout, #layout-wrapper {
+  background-color: transparent !important;
+  background: transparent !important;
 }
 
 /* Semi-transparent blur cards */

config-public/settings.yaml

@@ -1,3 +1,4 @@
 title: MischLabs
 theme: dark
 language: de
+background: /background.png