From 98cd873095ab555f374fd77e36e9b5f1176e05fa Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Tue, 20 Jan 2026 13:44:59 +0000
Subject: [PATCH] fix: passing on fill property to fallback image to support
 text as overlay with position absolute

Approved-by: Bianca Widstam
---
 packages/design-system/lib/components/Image/index.tsx         | 2 +-
 .../lib/components/ImageFallback/imageFallback.module.css     | 4 ++++
 packages/design-system/lib/components/ImageFallback/index.tsx | 4 +++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/lib/components/Image/index.tsx b/packages/design-system/lib/components/Image/index.tsx
index 7e3fce770..8b93445e4 100644
--- a/packages/design-system/lib/components/Image/index.tsx
+++ b/packages/design-system/lib/components/Image/index.tsx
@@ -45,7 +45,7 @@ export default function Image({
   }
 
   if (!src || imageError) {
-    return <ImageFallback />
+    return <ImageFallback fill={props.fill} />
   }
 
   return (
diff --git a/packages/design-system/lib/components/ImageFallback/imageFallback.module.css b/packages/design-system/lib/components/ImageFallback/imageFallback.module.css
index c688c2a15..ec6464305 100644
--- a/packages/design-system/lib/components/ImageFallback/imageFallback.module.css
+++ b/packages/design-system/lib/components/ImageFallback/imageFallback.module.css
@@ -7,4 +7,8 @@
   min-width: 200px;
   min-height: 200px;
   background-color: var(--Surface-Feedback-Neutral-light);
+
+  &.fill {
+    position: absolute;
+  }
 }
diff --git a/packages/design-system/lib/components/ImageFallback/index.tsx b/packages/design-system/lib/components/ImageFallback/index.tsx
index 1c43c0ab3..e24702c57 100644
--- a/packages/design-system/lib/components/ImageFallback/index.tsx
+++ b/packages/design-system/lib/components/ImageFallback/index.tsx
@@ -6,18 +6,20 @@ import styles from "./imageFallback.module.css"
 interface ImageFallbackProps extends React.HTMLAttributes<HTMLDivElement> {
   width?: string
   height?: string
+  fill?: boolean
 }
 
 export default function ImageFallback({
   width = "100%",
   height = "100%",
   className,
+  fill = false,
   ...props
 }: ImageFallbackProps) {
   return (
     <div
       {...props}
-      className={cx(styles.imageFallback, className)}
+      className={cx(styles.imageFallback, className, { [styles.fill]: fill })}
       style={{ width, height }}
     >
       <MaterialIcon