diff --git a/packages/pluggableWidgets/background-image-native/CHANGELOG.md b/packages/pluggableWidgets/background-image-native/CHANGELOG.md
index a059e2ca9..7844443e2 100644
--- a/packages/pluggableWidgets/background-image-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/background-image-native/CHANGELOG.md
@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+-   Fixed background image widget not visible when there is no content inside it.
+
 ## [2.2.0] - 2024-12-3
 
 ### Changed
diff --git a/packages/pluggableWidgets/background-image-native/package.json b/packages/pluggableWidgets/background-image-native/package.json
index df6cddc16..0eb01da40 100644
--- a/packages/pluggableWidgets/background-image-native/package.json
+++ b/packages/pluggableWidgets/background-image-native/package.json
@@ -1,7 +1,7 @@
 {
   "name": "background-image-native",
   "widgetName": "BackgroundImage",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
diff --git a/packages/pluggableWidgets/background-image-native/src/BackgroundImage.tsx b/packages/pluggableWidgets/background-image-native/src/BackgroundImage.tsx
index 29056c279..99774514f 100644
--- a/packages/pluggableWidgets/background-image-native/src/BackgroundImage.tsx
+++ b/packages/pluggableWidgets/background-image-native/src/BackgroundImage.tsx
@@ -4,7 +4,7 @@ import { ValueStatus } from "mendix";
 import { Image, SvgImageStyle } from "mendix/components/native/Image";
 import { flattenStyles } from "@mendix/piw-native-utils-internal";
 
-import { BackgroundImageStyle, defaultBackgroundImageStyle } from "./ui/Styles";
+import { BackgroundImageStyle, defaultBackgroundImageStyle, NO_CONTENT_CONTAINER_STYLE } from "./ui/Styles";
 import { BackgroundImageProps } from "../typings/BackgroundImageProps";
 
 export function BackgroundImage(props: BackgroundImageProps<BackgroundImageStyle>): JSX.Element | null {
@@ -33,8 +33,12 @@ export function BackgroundImage(props: BackgroundImageProps<BackgroundImageStyle
         { opacity, resizeMode }
     ] as StyleProp<SvgImageStyle>;
 
+    // When there's no content, allow container to grow to fill available space
+    // When there's content, size container to content
+    const containerStyle = props.content ? styles.container : [NO_CONTENT_CONTAINER_STYLE, styles.container];
+
     return (
-        <View style={styles.container} testID={name}>
+        <View style={containerStyle} testID={name}>
             <Image source={image.value} style={imageStyle} color={styles.image.svgColor} testID={`${name}$image`} />
             {props.content}
         </View>
diff --git a/packages/pluggableWidgets/background-image-native/src/__tests__/__snapshots__/BackgroundImage.spec.tsx.snap b/packages/pluggableWidgets/background-image-native/src/__tests__/__snapshots__/BackgroundImage.spec.tsx.snap
index e6703e7f2..4aec9f761 100644
--- a/packages/pluggableWidgets/background-image-native/src/__tests__/__snapshots__/BackgroundImage.spec.tsx.snap
+++ b/packages/pluggableWidgets/background-image-native/src/__tests__/__snapshots__/BackgroundImage.spec.tsx.snap
@@ -121,7 +121,16 @@ exports[`BackgroundImage renders with default styles 1`] = `
 
 exports[`BackgroundImage renders without content 1`] = `
 <View
-  style={{}}
+  style={
+    [
+      {},
+      {
+        "flexBasis": "auto",
+        "flexGrow": 1,
+        "flexShrink": 1,
+      },
+    ]
+  }
   testID="backgroundImageTest"
 >
   <Image
diff --git a/packages/pluggableWidgets/background-image-native/src/package.xml b/packages/pluggableWidgets/background-image-native/src/package.xml
index a894174c6..77a08f551 100644
--- a/packages/pluggableWidgets/background-image-native/src/package.xml
+++ b/packages/pluggableWidgets/background-image-native/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="BackgroundImage" version="2.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="BackgroundImage" version="2.2.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="BackgroundImage.xml" />
         </widgetFiles>
diff --git a/packages/pluggableWidgets/background-image-native/src/ui/Styles.ts b/packages/pluggableWidgets/background-image-native/src/ui/Styles.ts
index 1df8e0744..988002cf3 100644
--- a/packages/pluggableWidgets/background-image-native/src/ui/Styles.ts
+++ b/packages/pluggableWidgets/background-image-native/src/ui/Styles.ts
@@ -14,3 +14,5 @@ export const defaultBackgroundImageStyle: BackgroundImageStyle = {
     container: {},
     image: {}
 };
+
+export const NO_CONTENT_CONTAINER_STYLE = { flexGrow: 1, flexShrink: 1, flexBasis: "auto" as const };