How to change background page on the employee center login page

amit_kishore
Tera Contributor

Hi Team,

 

we are building instance and when we try to login to employee portal, there is while background. can anyone help "how the change the background"?  

amit_kishore_0-1703527925148.png

 

 

Note: SSO is not enabled so we have to login manually. 

 

 

Regards,

Amit

1 ACCEPTED SOLUTION

Aniket Chavan
Tera Sage
Tera Sage

Hello @amit_kishore ,

Okay then you can do one thing just remove the image which we added previously and just add the below code in the first "Login" page itself in the "Page Specific CSS" and just replace your image url, and that URL you can get once you have added your image in images table record(search for image in navigator and click under system UI < images), you can refer the below attached image as well for your reference.
Page Specific CSS:

 

main.page, main.body {
  height: 99vh;
  min-height: 100%;
  padding-top: 0px !important;
}

@media(max-width: 767px) {
  main.page, main.body {
    height: auto;
    min-height: 99vh;
  }
}

section.page {
  background-image: url('smile.png'); // replace url with your image name
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #3A3F50;
}

section.page main.body:before {
  display: block;
  background-color: #3A3F50;
  opacity: 0.75;
}

 

AniketChavan_0-1703700534173.png 

AniketChavan_1-1703700671379.png

Final Output :

AniketChavan_2-1703700807974.png

 

 

Let me know your views on this and Mark Correct if this solves your query and also mark 👍Helpful if you find my response worthy based on the impact.

 

Thanks,

Anike

 

 

 

View solution in original post

5 REPLIES 5

Aniket Chavan
Tera Sage
Tera Sage

Hello @amit_kishore ,

Okay then you can do one thing just remove the image which we added previously and just add the below code in the first "Login" page itself in the "Page Specific CSS" and just replace your image url, and that URL you can get once you have added your image in images table record(search for image in navigator and click under system UI < images), you can refer the below attached image as well for your reference.
Page Specific CSS:

 

main.page, main.body {
  height: 99vh;
  min-height: 100%;
  padding-top: 0px !important;
}

@media(max-width: 767px) {
  main.page, main.body {
    height: auto;
    min-height: 99vh;
  }
}

section.page {
  background-image: url('smile.png'); // replace url with your image name
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #3A3F50;
}

section.page main.body:before {
  display: block;
  background-color: #3A3F50;
  opacity: 0.75;
}

 

AniketChavan_0-1703700534173.png 

AniketChavan_1-1703700671379.png

Final Output :

AniketChavan_2-1703700807974.png

 

 

Let me know your views on this and Mark Correct if this solves your query and also mark 👍Helpful if you find my response worthy based on the impact.

 

Thanks,

Anike