diff --git a/src/panels/energy/ha-panel-energy.ts b/src/panels/energy/ha-panel-energy.ts
index 87b9a2f248..73dccae306 100644
--- a/src/panels/energy/ha-panel-energy.ts
+++ b/src/panels/energy/ha-panel-energy.ts
@@ -401,10 +401,22 @@ class PanelEnergy extends LitElement {
           padding-inline-start: env(safe-area-inset-left);
           padding-inline-end: env(safe-area-inset-right);
           padding-bottom: env(safe-area-inset-bottom);
+        }
+        /* Hack to support fixed background image on iOS */
+        #view:after {
+          display: block;
+          content: "";
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          position: fixed;
           background: var(
             --lovelace-background,
             var(--primary-background-color)
           );
+          background-attachment: local;
+          z-index: -1;
         }
         #view > * {
           flex: 1 1 100%;
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index 939d063e82..1592b369ab 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -1074,10 +1074,22 @@ class HUIRoot extends LitElement {
           padding-inline-start: env(safe-area-inset-left);
           padding-inline-end: env(safe-area-inset-right);
           padding-bottom: env(safe-area-inset-bottom);
+        }
+        /* Hack to support fixed background image on iOS */
+        #view:after {
+          display: block;
+          content: "";
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          position: fixed;
           background: var(
             --lovelace-background,
             var(--primary-background-color)
           );
+          background-attachment: local;
+          z-index: -1;
         }
         #view > * {
           flex: 1 1 100%;