Fix gradient backgrounds being overridden by background-image property

The layout had `background: var(--color-page-bg); background-image: ...`
which meant that when --color-page-bg was a gradient (which sets
background-image via the shorthand), the subsequent background-image
declaration would reset it to none.

Fix: use `background` shorthand only via CSS classes (.layout-page-bg,
.layout-nav-bg), and handle uploaded background images via class-level
overrides in generateTenantCSS instead of CSS vars.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app.css

@@ -28,6 +28,18 @@
 	}
 }
 
+.layout-page-bg {
+	background: var(--color-page-bg);
+	background-size: cover;
+	background-position: center;
+}
+
+.layout-nav-bg {
+	background: var(--color-nav-bg);
+	background-size: cover;
+	background-position: center;
+}
+
 .prose {
 	line-height: 1.6;
 }

src/lib/server/theme-css.ts

@@ -92,18 +92,19 @@ export function generateTenantCSS(theme: TenantThemeData | null | undefined): st
 		}
 	}
 
-	// Handle background images
+	// Handle background images — generate class-level overrides
+	const extraRules: string[] = [];
 	if (theme.lightPageBgImage) {
-		lightVars.push(`  --page-bg-image: url('${theme.lightPageBgImage}');`);
+		extraRules.push(`.layout-page-bg { background-image: url('${theme.lightPageBgImage}'); }`);
 	}
 	if (theme.lightNavBgImage) {
-		lightVars.push(`  --nav-bg-image: url('${theme.lightNavBgImage}');`);
+		extraRules.push(`.layout-nav-bg { background-image: url('${theme.lightNavBgImage}'); }`);
 	}
 	if (theme.darkPageBgImage) {
-		darkVars.push(`  --page-bg-image: url('${theme.darkPageBgImage}');`);
+		extraRules.push(`html.dark .layout-page-bg { background-image: url('${theme.darkPageBgImage}'); }`);
 	}
 	if (theme.darkNavBgImage) {
-		darkVars.push(`  --nav-bg-image: url('${theme.darkNavBgImage}');`);
+		extraRules.push(`html.dark .layout-nav-bg { background-image: url('${theme.darkNavBgImage}'); }`);
 	}
 
 	// Handle column/card opacity for backdrop-blur
@@ -120,7 +121,7 @@ export function generateTenantCSS(theme: TenantThemeData | null | undefined): st
 		darkVars.push(`  --card-backdrop-blur: blur(8px);`);
 	}
 
-	if (lightVars.length === 0 && darkVars.length === 0) return '';
+	if (lightVars.length === 0 && darkVars.length === 0 && extraRules.length === 0) return '';
 
 	let css = '<style id="tenant-theme">\n';
 	if (lightVars.length > 0) {
@@ -129,6 +130,9 @@ export function generateTenantCSS(theme: TenantThemeData | null | undefined): st
 	if (darkVars.length > 0) {
 		css += `html.dark {\n${darkVars.join('\n')}\n}\n`;
 	}
+	if (extraRules.length > 0) {
+		css += extraRules.join('\n') + '\n';
+	}
 	css += '</style>';
 
 	return css;

src/lib/utils/theme-preview.ts

@@ -45,6 +45,7 @@ function hexToRgba(hex: string, opacity: number): string {
 }
 
 const appliedVars: string[] = [];
+const appliedElements: { el: HTMLElement; prop: string }[] = [];
 
 /**
  * Applies theme preview by setting CSS vars on document.documentElement.style.
@@ -94,16 +95,22 @@ export function applyThemePreview(draft: TenantThemeData, mode: 'light' | 'dark'
 		}
 	}
 
-	// Handle bg images
+	// Handle bg images — set directly on target elements
 	const pageBgImage = (draft as any)[pageBgImageField];
 	if (pageBgImage) {
-		el.style.setProperty('--page-bg-image', `url('${pageBgImage}')`);
-		appliedVars.push('--page-bg-image');
+		const pageEl = document.querySelector('.layout-page-bg') as HTMLElement;
+		if (pageEl) {
+			pageEl.style.backgroundImage = `url('${pageBgImage}')`;
+			appliedElements.push({ el: pageEl, prop: 'background-image' });
+		}
 	}
 	const navBgImage = (draft as any)[navBgImageField];
 	if (navBgImage) {
-		el.style.setProperty('--nav-bg-image', `url('${navBgImage}')`);
-		appliedVars.push('--nav-bg-image');
+		const navEl = document.querySelector('.layout-nav-bg') as HTMLElement;
+		if (navEl) {
+			navEl.style.backgroundImage = `url('${navBgImage}')`;
+			appliedElements.push({ el: navEl, prop: 'background-image' });
+		}
 	}
 }
 
@@ -116,4 +123,8 @@ export function clearThemePreview() {
 		el.style.removeProperty(v);
 	}
 	appliedVars.length = 0;
+	for (const { el: targetEl, prop } of appliedElements) {
+		targetEl.style.removeProperty(prop);
+	}
+	appliedElements.length = 0;
 }

src/routes/+layout.svelte

@@ -24,8 +24,8 @@
 	});
 </script>
 
-<div class="min-h-screen" style="background: var(--color-page-bg); background-image: var(--page-bg-image, none); background-size: cover; background-position: center;">
-	<nav class="shadow-sm" style="background: var(--color-nav-bg); background-image: var(--nav-bg-image, none); background-size: cover; background-position: center;">
+<div class="min-h-screen layout-page-bg">
+	<nav class="shadow-sm layout-nav-bg">
 		<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
 			<div class="flex h-14 items-center justify-between">
 				<a href="/" class="flex items-center gap-2 text-white font-bold text-lg">