diff --git a/frontend/public/images/falukant/backgrounds/house-sunny-meadow.png b/frontend/public/images/falukant/backgrounds/house-sunny-meadow.png
new file mode 100644
index 0000000..cdcf184
Binary files /dev/null and b/frontend/public/images/falukant/backgrounds/house-sunny-meadow.png differ
diff --git a/frontend/src/components/falukant/House3D.vue b/frontend/src/components/falukant/House3D.vue
index 594ba84..605edfe 100644
--- a/frontend/src/components/falukant/House3D.vue
+++ b/frontend/src/components/falukant/House3D.vue
@@ -74,9 +74,9 @@ export default {
       const runtime = await import('@/utils/threeRuntime.js');
       if (!this.isVisible || !this.$refs.container || this.renderer) return;
       this.scene = markRaw(new runtime.Scene());
-      this.scene.background = new runtime.Color(0xf7f1e6);
       this.camera = markRaw(new runtime.PerspectiveCamera(36, 1, 0.1, 100));
-      this.renderer = markRaw(new runtime.WebGLRenderer({ antialias: true, alpha: false }));
+      this.renderer = markRaw(new runtime.WebGLRenderer({ antialias: true, alpha: true }));
+      this.renderer.setClearColor(0x000000, 0);
       this.renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
       container.appendChild(this.renderer.domElement);
 
@@ -195,7 +195,7 @@ export default {
   overflow: hidden;
   border: 1px solid var(--color-border);
   border-radius: inherit;
-  background: #f7f1e6;
+  background: #8ed0f5 url('/images/falukant/backgrounds/house-sunny-meadow.png') center / cover no-repeat;
 }
 
 .house-3d__unavailable {