Auth0 Home Blog Docs

Background image on hosted login page on mobile

hosted-login-page

#1

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


#2

… anyone who can help?


#3

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.


#4

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?


#5

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

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; }

#6

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


#7

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;
    }
    

#8

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

auth0.txt (623 Bytes)


#9

Thanks. No luck with this neither.

It works on PC but still stays white on mobile…


#10

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.


#11

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?


#12

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.


#13

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

?


#14

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)


#15

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?


#16

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.