Custom Login Page Background

Owned by Seth Petry-Johnson
Last updated: Dec 20, 2023 by Seth Petry-Johnson
1 min read

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

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

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