Login Page Background Customization

LearningBuilder now allows you to use custom background images on the login page. This only applies to local logins, not oauth type login pages.

1. To create an appropriate background image, it should ideally be 16:9 ratio and shoot for at least 2000px on the longest side. It should be no more than 72dpi. Keep the file size as small as possible while keeping the best quality. The file format should be JPG.

2. When you have the image you want to use, upload it to your client_assets folder.

3. Go to your tenant customization are under Admin > Tenant.

4. Find the tenant you want to update and click the “edit” icon.

5. In the Custom CSS entry, copy and paste the following code:

   1. .url-account-login #responsive-main {
      background: url(/Content/client_assets/DEFAULT/login-desktop.jpg);
      background-size: cover;
      }
      
      .login-table-content {
      background: rgba(255, 255, 255, .5);
      border: 3px solid #eeeeee;
      padding:10px;
      }

6. You will need to change the link on line 2 to point to your client assets folder and your image name the code above can be used to set the default background image on baseline. You can also include a the full URL to any file hosted externally.

7. Line 6 sets the background color/opacity behind the left side content block so you can read text easily on the background if needed. If you don’t need this, you can delete lines 6 through 10.

8. Congratulations! You’re done!