From 44423812f451d6ab153f0bce4dd9d79694ae2168 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Tue, 24 Dec 2024 14:48:28 +0100
Subject: [PATCH] Set defaults for background settings, restore old behavior
 (#23436)

Fixes https://github.com/home-assistant/frontend/issues/23421
---
 .../view-editor/hui-view-background-editor.ts | 26 +++++++++++++------
 .../lovelace/views/hui-view-background.ts     |  2 +-
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/panels/lovelace/editor/view-editor/hui-view-background-editor.ts b/src/panels/lovelace/editor/view-editor/hui-view-background-editor.ts
index 58481f5164..ec1a102a8d 100644
--- a/src/panels/lovelace/editor/view-editor/hui-view-background-editor.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-view-background-editor.ts
@@ -115,14 +115,24 @@ export class HuiViewBackgroundEditor extends LitElement {
       };
     }
 
-    background = {
-      transparency: 100,
-      alignment: "center",
-      size: "auto",
-      repeat: "no-repeat",
-      attachment: "scroll",
-      ...background,
-    };
+    if (!background) {
+      background = {
+        transparency: 33,
+        alignment: "center",
+        size: "cover",
+        repeat: "repeat",
+        attachment: "fixed",
+      };
+    } else {
+      background = {
+        transparency: 100,
+        alignment: "center",
+        size: "cover",
+        repeat: "no-repeat",
+        attachment: "scroll",
+        ...background,
+      };
+    }
 
     return html`
       <ha-form
diff --git a/src/panels/lovelace/views/hui-view-background.ts b/src/panels/lovelace/views/hui-view-background.ts
index bf322b4170..fbb5e933c9 100644
--- a/src/panels/lovelace/views/hui-view-background.ts
+++ b/src/panels/lovelace/views/hui-view-background.ts
@@ -52,8 +52,8 @@ export class HUIViewBackground extends LitElement {
     background?: string | LovelaceViewBackgroundConfig
   ) {
     if (typeof background === "object" && background.image) {
-      const size = background.size ?? "auto";
       const alignment = background.alignment ?? "center";
+      const size = background.size ?? "cover";
       const repeat = background.repeat ?? "no-repeat";
       return `${alignment} / ${size} ${repeat} url('${background.image}')`;
     }