diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index e95cdf1861..f36cd10c1f 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -886,9 +886,9 @@ class HUIRoot extends LitElement {
     const configBackground = viewConfig.background || this.config.background;
 
     if (configBackground) {
-      this.style.setProperty("--lovelace-background", configBackground);
+      root.style.setProperty("--lovelace-background", configBackground);
     } else {
-      this.style.removeProperty("--lovelace-background");
+      root.style.removeProperty("--lovelace-background");
     }
 
     root.appendChild(view);
diff --git a/src/panels/lovelace/views/hui-view.ts b/src/panels/lovelace/views/hui-view.ts
index 6d35d6a715..2dd636431d 100644
--- a/src/panels/lovelace/views/hui-view.ts
+++ b/src/panels/lovelace/views/hui-view.ts
@@ -143,6 +143,11 @@ export class HUIView extends ReactiveElement {
     return this;
   }
 
+  public connectedCallback(): void {
+    super.connectedCallback();
+    this._applyTheme();
+  }
+
   public willUpdate(changedProperties: PropertyValues): void {
     super.willUpdate(changedProperties);
 
@@ -212,7 +217,7 @@ export class HUIView extends ReactiveElement {
           this.hass.themes !== oldHass.themes ||
           this.hass.selectedTheme !== oldHass.selectedTheme
         ) {
-          applyThemesOnElement(this, this.hass.themes, this._viewConfigTheme);
+          this._applyTheme();
         }
       }
       if (changedProperties.has("narrow")) {
@@ -238,6 +243,28 @@ export class HUIView extends ReactiveElement {
     }
   }
 
+  private _applyTheme() {
+    applyThemesOnElement(this, this.hass.themes, this._viewConfigTheme);
+    if (this._viewConfigTheme) {
+      // Set lovelace background color to root element, so it will be placed under the header too
+      const computedStyles = getComputedStyle(this);
+      let lovelaceBackground = computedStyles.getPropertyValue(
+        "--lovelace-background"
+      );
+      if (!lovelaceBackground) {
+        lovelaceBackground = computedStyles.getPropertyValue(
+          "--primary-background-color"
+        );
+      }
+      if (lovelaceBackground) {
+        this.parentElement?.style.setProperty(
+          "--lovelace-background",
+          lovelaceBackground
+        );
+      }
+    }
+  }
+
   private async _initializeConfig() {
     let viewConfig = this.lovelace.config.views[this.index];
     let isStrategy = false;