I have a problem loading the background image on the login page, I created the login using the No-Code tool.

I created an image with a width smaller than 2000px, I created a link to the image, but when I copy the link into the correct section, it doesn’t appear in the actual login

Hi @quattrozero7 , welcome to the Auth0 Community!

The background image must have a width LARGER than 2000px. this info is found just below the field where you enter the image URL - “This URL must start with https:// and be at least 2000px wide.”
Hope this helps resolve the issue, thanks!

Hi Nathan, thanks for the reply.
I created a 2048px wide image, created the link and copied it to the appropriate field. However the image still does not appear. Also trying to remove the image link from the field and leaving only the background color set to white #ffffff, when I open the login the background is black. I can not understand…

Hi @quattrozero7 , I’ll send you a DM and have a look into your configuration :slight_smile:

Has there been a solution to this problem? I ran into the exact same issue where the background image would not be displayed (although it would show up in Auth0’s preview tool). I verified that the image is wider than 2000px and tested multiple different images but still, no luck.

Hi @tom19,

The issue seemed to be caused by the logo used in the Widget Logo URL on this occasion.
But your issue sounds different as you say it is correctly showing in the preview.

I would suggest checking that there are no other customizations to the specific login pages that may be causing the Classic UL to override the New Universal Login.

I tested it by removing the logo URL from the widget but that didn’t have an impact, the background is still not showing up.

We are using the new UL without any customizations to the login, password reset or MFA, so I don’t know what else to check…

1 Like

Hey Tom,
Any luck with the issue? I am facing exactly the same problem, wherein the preview would update but the ‘Save and Publish’ throws an error. Please let me know if you found any resolution.
CC: @nathan.jenkins

Hi @shrutikachawla , welcome to the Auth0 Community!

What is the error message that you are seeing?

Problems with the Logo may occur if something is not quite right when using a Custom Page template, (if applicable) this is read / updated by the Management API.
Thanks

I also have this problem using the Universal Login. I’ve tried JPG at varying sizes over 2000 px, PNG, and even SVG. The preview renders just fine, but when I “try” it or publish it, the background image is not rendered.

If the page rendered something like this, it would work:

body {
    background-image: url(https://path-to-my-file.jpg);
    background-size: cover;
    background-position: center;
}

Instead it is rendering something like this, which does not work:

          .c4f542bc4 {
    --page-background-image: url('https://path-to-my-file.jpg');
  }

Thanks.

Same problem here, how to make the background image work ?

I also customized he universal login page with css / javascript, but even removing my custom styles, background doesn’t appear.

How to make this background url (from auth0 no code ui) work on auth0 universal login ?

@whitney.mcdonald do you have any news about this bug ?

Your workaround is great, but it’s a hard coded think, the best would be to be able to use the nocode editor to pass the background image.

Best would be to use something like in our custom css code

--page-background-image: url({%- auth0:branding.colors.page_background -%}

Cf Background Image is Not Loading for Custom Page Template