diff --git a/apps/docs/docs/management/boards/index.mdx b/apps/docs/docs/management/boards/index.mdx
index 5c3a20c9f..89f061f1e 100644
--- a/apps/docs/docs/management/boards/index.mdx
+++ b/apps/docs/docs/management/boards/index.mdx
@@ -273,6 +273,8 @@ Expanding it smoothly restores those bounds and moves following items out of the
 
 ### Background
 
+When a background image is set, it always covers at least the full browser window height, even if the board's content is shorter (for example when a Container is collapsed).
+
 #### Background image URL
 
 Homarr can display a background image behind apps and widgets.
diff --git a/apps/nextjs/src/components/layout/shell.tsx b/apps/nextjs/src/components/layout/shell.tsx
index 558ba0c69..bf86ca341 100644
--- a/apps/nextjs/src/components/layout/shell.tsx
+++ b/apps/nextjs/src/components/layout/shell.tsx
@@ -27,6 +27,12 @@ export const ClientShell = ({
   return (
     <AppShell
       {...backgroundProps}
+      // The board canvas sizes itself to its content (AppShell runs in "static" mode so
+      // <main> doesn't force a 100dvh minimum - see AppShell.css). Without this, a board
+      // background image only covers as much height as the content needs, so collapsing a
+      // container short enough leaves flat page background showing below it instead of the
+      // background continuing to the bottom of the viewport.
+      mih={backgroundProps.bg ? "100dvh" : undefined}
       header={hasHeader ? { height: headerHeight } : undefined}
       navbar={
         hasNavigation