Background image on hosted login page on mobile

we have configured a fullscreen backup image in our hosted login page which works fine.
The issue is it is not displayed when accessing the login page on mobile.

Can someone help me to fix this?


1 Like

… anyone who can help?

Hi even we took the same approach it was initially showing image but login popup was not working post migration date it started working automatically. Suspect css html issue. Thanks.

well, this is what is in our hosted login page code:

  <style type="text/css">
    .auth0-lock.auth0-lock.auth0-lock-opened .auth0-lock-overlay {
    background-image: url( !important;
    background-size: cover !important;

can you suggest anything else to add?

Hi ,
WE use the following check by replacing the image with yours may work.

eventValue - Adding value to event body{ background: url("") no-repeat; background-size:cover; } .auth0-lock.auth0-lock.auth0-lock-opened .auth0-lock-overlay { opacity: 0.9; }

many thanks, can you specify where exactly to add this?

hey please use following html replace relevant values this is the starting of the hosted page

  eventValue - Adding value to event
    background: url("")  no-repeat;
    .auth0-lock.auth0-lock.auth0-lock-opened .auth0-lock-overlay {
    opacity: 0.9;

Sorry html is getting lost while posting here attaching a file for reference.

auth0.txt (623 Bytes)

Thanks. No luck with this neither.

It works on PC but still stays white on mobile…

hey just checkd your home page the problem is the auth0 lock UI screen occupies the whole screen that why you dont see the background. It same case with us as well . Initially for us the login screen itself was not coming. but during the redirect for fraction of a sec you can see the background image. Thanks.

oh i see :slight_smile:
you are right, i actually CAN see the background in landscape mode…

but the login form ist just bigger as it needs to be… can that be somehow changed?

check this out lock does allow to change height width etc. and coordinates but ensure u keep a backup of existing page. Thanks.

ok, thanks.
Where do I add these options? Like this:


Hi - Not sure seems correct attached our hosted page for reference. Its a bit complex since we show social media connections etc dynamically. Let me know if it works. Thanks. authostedpage.txt (3.5 KB)

alright, that helped indeed as i now understand the “options” values need to go into the “auth” variable…
however the popupOptions seem to still not have any effect on my login box… no matter what i use, the box always looks the same… as i can see you havn’t adjusted the appearance of yours, right?

Hi - surprising as per the docs it should. Yes we didnt make any changes in appearance and i would personally suggest against it as it may impact the over all repressiveness across different screen sizes. Thanks.

How did you solve this problem - I actually wasnt able to view background image at all using css on the Universal login page.

Hi Chris - Sorry for late reply. Please add following tags to ur hosted page .

background: url(“”) no-repeat;
.auth0-lock.auth0-lock.auth0-lock-opened .auth0-lock-overlay {
opacity: 0.9;

Hello Srinivas,
Thanks for your response in such a timely manner. I was wondering - “hosted page” as you mentioned are pages that we are hosting or is this a page via Auth0 dashboard interface… I was thinking maybe this might be the “Customize Login” page of the “Universal Login” section of Auth0 dashboard - no?


Hi Chris - yes it is Universal Login - on the Auth0 Dash board the link may be helpful. Thanks.