Background Image is Not Loading for Custom Page Template

Knowledge Articles
1

Overview

When using page templates the background image that has been specified is not used.

Solution

There is currently an issue with passing the background image parameter, and it is not listed here under Customize Universal Login Pate Templates / Branding:

To workaround this, use a template like this to specify the background image within the page template directly:

<!DOCTYPE html>
<html lang="{{locale}}">

<head>
  {%- auth0:head -%}
  <style>
      body._widget-auto-layout {
        --page-background-image: url('<yourImageUrlHere>');
        background-image: var(--page-background-image);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
      }
    </style>
    <title>{{ prompt.screen.texts.pageTitle }}</title>
</head>

<body class="_widget-auto-layout">
  {%- auth0:widget -%}
</body>

</html>
1 Like