diff --git a/cast/src/receiver/layout/hc-lovelace.ts b/cast/src/receiver/layout/hc-lovelace.ts
index 0be9488a54..3c52475fd6 100644
--- a/cast/src/receiver/layout/hc-lovelace.ts
+++ b/cast/src/receiver/layout/hc-lovelace.ts
@@ -57,10 +57,16 @@ class HcLovelace extends LitElement {
       const index = this._viewIndex;
 
       if (index !== undefined) {
-        this.shadowRoot!.querySelector("hui-view")!.style.background =
+        const configBackground =
           this.lovelaceConfig.views[index].background ||
-          this.lovelaceConfig.background ||
-          "";
+          this.lovelaceConfig.background;
+
+        if (configBackground) {
+          this.shadowRoot!.querySelector("hui-view")!.style.setProperty(
+            "--lovelace-background",
+            configBackground
+          );
+        }
       }
     }
   }
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index ce513e27bb..7780070262 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -568,7 +568,12 @@ class HUIRoot extends LitElement {
           unusedEntities.hass = this.hass!;
         }
       );
-      root.style.background = this.config.background || "";
+      if (this.config.background) {
+        unusedEntities.style.setProperty(
+          "--lovelace-background",
+          this.config.background
+        );
+      }
       root.append(unusedEntities);
       return;
     }
@@ -597,8 +602,13 @@ class HUIRoot extends LitElement {
     }
 
     view.hass = this.hass;
-    root.style.background =
-      viewConfig.background || this.config.background || "";
+
+    const configBackground = viewConfig.background || this.config.background;
+
+    if (configBackground) {
+      view.style.setProperty("--lovelace-background", configBackground);
+    }
+
     root.append(view);
   }
 }
diff --git a/src/panels/lovelace/hui-unused-entities.ts b/src/panels/lovelace/hui-unused-entities.ts
index 949dd0f38a..55ab49cf1e 100644
--- a/src/panels/lovelace/hui-unused-entities.ts
+++ b/src/panels/lovelace/hui-unused-entities.ts
@@ -56,6 +56,9 @@ export class HuiUnusedEntities extends LitElement {
   private renderStyle(): TemplateResult {
     return html`
       <style>
+        :host {
+          background: var(--lovelace-background);
+        }
         #root {
           padding: 4px;
           display: flex;
diff --git a/src/panels/lovelace/hui-view.ts b/src/panels/lovelace/hui-view.ts
index 06cd4b04fc..d8bf24004b 100644
--- a/src/panels/lovelace/hui-view.ts
+++ b/src/panels/lovelace/hui-view.ts
@@ -121,6 +121,7 @@ export class HUIView extends LitElement {
           padding: 4px 4px 0;
           transform: translateZ(0);
           position: relative;
+          background: var(--lovelace-background);
         }
 
         #badges {