Custom background image for Organization using Customized Universal Login

[arielle.ross]

I am customizing our login experience using the New Universal Login pages with a Liquid html file. In order to customize the experience for different clients, I am using the Organization feature to check for organization ID before setting styling; however, I need a background image not background-color for an organization. Is there a way to override the Organization’s background-color setting with an image (set via Organizations > select org > branding > background-color)? If not, is there an alternative method to customizing login experiences for different clients? Not attached to using Organizations, really only using that for the potential of login experience customization.

Here’s my code in the login.liquid.html-

<style>
      {% if organization.id == "org_id-here" %}
        /* Client 1 */
        body {
          background-image: url('[bg-image-url-here]');
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
        }
      {% else %}
      ...
      </style>

Thanks!

[lihua.zhang]

Hi @arielle.ross ,

Welcome to the Auth0 Community!

I understand that you want to customize the login experience for different clients.

The feature of customizing the organization’s background image is not available yet. As an alternative, this doc explains how to customize the logo for different applications. Instead of calling the application.name, try organization.name like below.

<style>
      {% if organization.name == "org1" %}
      #custom-prompt-logo {
      background-image: url('https://cdn.auth0.com/manhattan/versions/1.3312.0/assets/badge.png');
      }
      {% elsif organization.name == "org2" %}
      background-image: url('https://cdn.auth0.com/blog/auth0rta/theme/logos/auth0-logo-black.png');
      }
      {% endif %}
  </style>

Hopefully, it matches your use case. Please let me know if any further queries about this topic. Thanks!