Overview

The standard login page can be given visual flair and branding by using a custom background image.

Configuration instructions

1

Create the image

Files should:

  • Be 16:9 ratio

  • At least 2000px on the longest side

  • No more than 72dpi

  • In JPG format

Keep the file size as small as possible while keeping the best quality.

2

Upload the image to your /client_assets folder

This may require technical support.

Alternatively, you can host the image on any external hosting provider; LearningBuilder just needs a way to reference it via URL.

3

Modify the tenant-specific config settings in Admin → Tenant

Configure the relevant tenant’s Custom CSS using this code:

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

Be sure to change the link on line 2 to your folder and image name

Be sure to change the link on line 2 to your folder and image name

note

Line 6 sets the background color / opacity behind the left side content blocks so that text is legible against the background. If you don’t need this, delete lines 6 through 10.

Line 6 sets the background color / opacity behind the left side content blocks so that text is legible against the background. If you don’t need this, delete lines 6 through 10.

Example