Hey,
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?
THX
Jens
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(https://pododesk.net/a100d9620594af71426f219edb667617.jpg) !important;
background-size: cover !important;
}
</style>
can you suggest anything else to add?
Hi ,
WE use the following check by replacing the image with yours may work.
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
body{
background: url("https://s3.ap-south-1.amazonaws.com/img.eventvalue.com/evbgfull.png") no-repeat;
background-size:cover;
}
.auth0-lock.auth0-lock.auth0-lock-opened .auth0-lock-overlay {
opacity: 0.9;
}
hey just checkd your home page https://pododesk.net/ 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 
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 https://auth0.com/docs/libraries/lock/v11/configuration#popupoptions-object- lock does allow to change height width etc. and coordinates but ensure u keep a backup of existing page. Thanks.
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 .
body{
background: url(“https://s3.ap-south-1.amazonaws.com/img.eventvalue.com/evbgfull.png”) no-repeat;
background-size:cover;
}
.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?
Chris
Hi Chris - yes it is Universal Login - https://manage.auth0.com/dashboard/us/eventvalue/login_settings on the Auth0 Dash board the link may be helpful. Thanks.