diff --git a/authentik/core/templates/if/flow.html b/authentik/core/templates/if/flow.html
index 742a24867..d334fdae1 100644
--- a/authentik/core/templates/if/flow.html
+++ b/authentik/core/templates/if/flow.html
@@ -5,6 +5,7 @@
 
 {% block head_before %}
 {{ block.super }}
+<link rel="prefetch" href="{{ flow.background_url }}" />
 {% if flow.compatibility_mode and not inspector %}
 <script>ShadyDOM = { force: !navigator.webdriver };</script>
 {% endif %}
@@ -19,7 +20,7 @@ window.authentik.flow = {
 {% block head %}
 <script src="{% static 'dist/flow/FlowInterface.js' %}" type="module"></script>
 <style>
-.pf-c-background-image::before {
+:root {
     --ak-flow-background: url("{{ flow.background_url }}");
 }
 </style>
diff --git a/authentik/core/templates/login/base_full.html b/authentik/core/templates/login/base_full.html
index 4e7b729c3..e5562df7d 100644
--- a/authentik/core/templates/login/base_full.html
+++ b/authentik/core/templates/login/base_full.html
@@ -4,13 +4,19 @@
 {% load i18n %}
 
 {% block head_before %}
+<link rel="prefetch" href="/static/dist/assets/images/flow_background.jpg" />
 <link rel="stylesheet" type="text/css" href="{% static 'dist/patternfly.min.css' %}">
 {% endblock %}
 
 {% block head %}
 <style>
-.pf-c-background-image::before {
+:root {
     --ak-flow-background: url("/static/dist/assets/images/flow_background.jpg");
+    --pf-c-background-image--BackgroundImage: var(--ak-flow-background);
+    --pf-c-background-image--BackgroundImage-2x: var(--ak-flow-background);
+    --pf-c-background-image--BackgroundImage--sm: var(--ak-flow-background);
+    --pf-c-background-image--BackgroundImage--sm-2x: var(--ak-flow-background);
+    --pf-c-background-image--BackgroundImage--lg: var(--ak-flow-background);
 }
 /* Form with user */
 .form-control-static {
diff --git a/internal/outpost/proxyv2/templates/error.html b/internal/outpost/proxyv2/templates/error.html
index f6b1b5fbe..8d89609d5 100644
--- a/internal/outpost/proxyv2/templates/error.html
+++ b/internal/outpost/proxyv2/templates/error.html
@@ -9,10 +9,19 @@
         <link rel="stylesheet" type="text/css" href="/outpost.goauthentik.io/static/dist/patternfly.min.css">
         <link rel="stylesheet" type="text/css" href="/outpost.goauthentik.io/static/dist/authentik.css">
         <link rel="stylesheet" type="text/css" href="/outpost.goauthentik.io/static/dist/custom.css">
+        <link rel="prefetch" href="/outpost.goauthentik.io/static/dist/assets/images/flow_background.jpg" />
         <style>
             .pf-c-background-image::before {
                 --ak-flow-background: url("/outpost.goauthentik.io/static/dist/assets/images/flow_background.jpg");
             }
+            :root {
+                --ak-flow-background: url("/outpost.goauthentik.io/static/dist/assets/images/flow_background.jpg");
+                --pf-c-background-image--BackgroundImage: var(--ak-flow-background);
+                --pf-c-background-image--BackgroundImage-2x: var(--ak-flow-background);
+                --pf-c-background-image--BackgroundImage--sm: var(--ak-flow-background);
+                --pf-c-background-image--BackgroundImage--sm-2x: var(--ak-flow-background);
+                --pf-c-background-image--BackgroundImage--lg: var(--ak-flow-background);
+            }
         </style>
     </head>
     <body>
diff --git a/web/src/authentik.css b/web/src/authentik.css
index 52c90791e..dca5b6a9b 100644
--- a/web/src/authentik.css
+++ b/web/src/authentik.css
@@ -9,6 +9,12 @@
     --ak-dark-background-light: #1c1e21;
     --ak-dark-background-light-ish: #212427;
     --ak-dark-background-lighter: #2b2e33;
+
+    --pf-c-background-image--BackgroundImage: var(--ak-flow-background);
+    --pf-c-background-image--BackgroundImage-2x: var(--ak-flow-background);
+    --pf-c-background-image--BackgroundImage--sm: var(--ak-flow-background);
+    --pf-c-background-image--BackgroundImage--sm-2x: var(--ak-flow-background);
+    --pf-c-background-image--BackgroundImage--lg: var(--ak-flow-background);
 }
 
 html {
