diff --git a/services/idp/pkg/config/config.go b/services/idp/pkg/config/config.go
index e465add2f..ce712edb9 100644
--- a/services/idp/pkg/config/config.go
+++ b/services/idp/pkg/config/config.go
@@ -54,7 +54,8 @@ type Ldap struct {
 
 // Asset defines the available asset configuration.
 type Asset struct {
-	Path string `yaml:"asset" env:"IDP_ASSET_PATH" desc:"Serve IDP assets from a path on the filesystem instead of the builtin assets."`
+	Path               string `yaml:"asset" env:"IDP_ASSET_PATH" desc:"Serve IDP assets from a path on the filesystem instead of the builtin assets."`
+	LoginBackgroundUrl string `yaml:"login-background-url" env:"IDP_LOGIN_BACKGROUND_URL" desc:"Configure an alternative URL to the background image for the login page."`
 }
 
 type Client struct {
diff --git a/services/idp/pkg/service/v0/service.go b/services/idp/pkg/service/v0/service.go
index 7aabdad7f..1bca23f90 100644
--- a/services/idp/pkg/service/v0/service.go
+++ b/services/idp/pkg/service/v0/service.go
@@ -276,7 +276,7 @@ func (idp IDP) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 	idp.mux.ServeHTTP(w, r)
 }
 
-// Index renders the static html with the
+// Index renders the static html with templated variables.
 func (idp IDP) Index() http.HandlerFunc {
 	f, err := idp.assets.Open("/identifier/index.html")
 	if err != nil {
@@ -295,6 +295,9 @@ func (idp IDP) Index() http.HandlerFunc {
 	pp := "/signin/v1"
 	indexHTML := bytes.Replace(template, []byte("__PATH_PREFIX__"), []byte(pp), 1)
 
+	background := idp.config.Asset.LoginBackgroundUrl
+	indexHTML = bytes.Replace(template, []byte("__BG_IMG_URL__"), []byte(background), 1)
+
 	nonce := rndm.GenerateRandomString(32)
 	indexHTML = bytes.Replace(indexHTML, []byte("__CSP_NONCE__"), []byte(nonce), 1)
 
diff --git a/services/idp/public/index.html b/services/idp/public/index.html
index a8307ad82..de9e9839b 100644
--- a/services/idp/public/index.html
+++ b/services/idp/public/index.html
@@ -12,6 +12,6 @@
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
-    <main id="root" class="oc-login-bg" data-path-prefix="__PATH_PREFIX__" passwort-reset-link="__PASSWORD_RESET_LINK__"></main>
+    <main id="root" data-path-prefix="__PATH_PREFIX__" passwort-reset-link="__PASSWORD_RESET_LINK__" data-bg-img="__BG_IMG_URL__"></main>
   </body>
 </html>
diff --git a/services/idp/src/App.jsx b/services/idp/src/App.jsx
index edfe5ef28..672be4deb 100644
--- a/services/idp/src/App.jsx
+++ b/services/idp/src/App.jsx
@@ -1,4 +1,5 @@
 import React, { ReactElement, Suspense, lazy } from 'react';
+import PropTypes from 'prop-types';
 
 import { MuiThemeProvider } from '@material-ui/core/styles';
 import { defaultTheme as theme } from 'kpop/es/theme';
@@ -13,14 +14,23 @@ const LazyMain = lazy(() => import(/* webpackChunkName: "identifier-main" */ './
 
 console.info(`Kopano Identifier build version: ${version.build}`); // eslint-disable-line no-console
 
-const App = (): ReactElement => {
+const App = ({ bgImg }): ReactElement => {
   return (
-    <MuiThemeProvider theme={theme}>
-      <Suspense fallback={<Spinner/>}>
-        <LazyMain />
-      </Suspense>
-    </MuiThemeProvider>
+    <div
+      className='oc-login-bg'
+      style={{ backgroundImage: bgImg ? `url(${bgImg})` : undefined }}
+    >
+      <MuiThemeProvider theme={theme}>
+        <Suspense fallback={<Spinner/>}>
+          <LazyMain/>
+        </Suspense>
+      </MuiThemeProvider>
+    </div>
   );
 }
 
+App.propTypes = {
+  bgImg: PropTypes.string
+};
+
 export default App;
diff --git a/services/idp/src/app.css b/services/idp/src/app.css
index a2636504c..65b576d62 100644
--- a/services/idp/src/app.css
+++ b/services/idp/src/app.css
@@ -24,6 +24,8 @@ strong {
   background-repeat: no-repeat;
   background-position: center;
   z-index: 0;
+  display: flex;
+  width: 100%;
 }
 
 #loader {
diff --git a/services/idp/src/index.tsx b/services/idp/src/index.tsx
index 0d163ba23..d82393976 100644
--- a/services/idp/src/index.tsx
+++ b/services/idp/src/index.tsx
@@ -9,11 +9,16 @@ import store from './store';
 
 import './app.css';
 
+const root = document.getElementById('root')
+
+// if a custom background image has been configured, make use of it
+const bgImg = root.getAttribute('data-bg-img')
+
 ReactDOM.render(
   <React.StrictMode>
     <Provider store={store as any}>
-      <App/>
+      <App bgImg={bgImg}/>
     </Provider>
   </React.StrictMode>,
-  document.getElementById('root')
+  root
 );