owncloud · dj4oC · Jun 11, 2026 · Jun 13, 2026
diff --git a/changelog/unreleased/enhancement-branded-login-background.md b/changelog/unreleased/enhancement-branded-login-background.md
@@ -0,0 +1,9 @@
+Enhancement: ownCloud branded login background
+
+The default login page background has been replaced with the ownCloud branding
+background. The background image is now applied through the CSS custom
+property `--oc-login-background-image`, so a future branding update only needs
+to change one value. The image itself still comes from the theme
+(`loginPage.backgroundImg` in theme.json) and remains fully customizable.
+
+https://github.com/owncloud/web/pull/13875
diff --git a/packages/design-system/src/styles/theme/login.scss b/packages/design-system/src/styles/theme/login.scss
@@ -1,6 +1,12 @@
 .oc-login {
-  @extend .oc-background-cover;
-
+  // contain (not cover) so the logo baked into the branded background
+  // artwork is never cropped at viewport aspect ratios that differ from the
+  // image; the matching solid color fills any letterbox so it blends with
+  // the artwork's edges
+  @extend .oc-background-contain;
+
+  background-color: #3c4d9b;
+  background-image: var(--oc-login-background-image);
   position: relative;
 
   &-logo {

diff --git a/packages/web-runtime/src/layouts/Plain.vue b/packages/web-runtime/src/layouts/Plain.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="oc-login oc-height-viewport"
-    :style="{ backgroundImage: 'url(' + backgroundImg + ')' }"
+    :style="{ '--oc-login-background-image': 'url(' + backgroundImg + ')' }"
   >
     <h1 class="oc-invisible-sr" v-text="pageTitle" />
     <router-view />

diff --git a/packages/web-runtime/themes/owncloud/assets/loginBackground.jpg b/packages/web-runtime/themes/owncloud/assets/loginBackground.jpg