How To: Change the Background Image for a Realm

Version Affected: All

 

Overview

This article explains how to change the background image displayed on a realm's login page, and how to set a different background image for an individual page within a realm. The steps for the realm-level background depend on which theme the realm uses.

Use the method below that matches your realm's theme:

• Use Method 1 if the realm uses the 2016 Light theme.
• Use Method 2 if the realm uses the 2019 theme.
• Use Method 3 if the realm uses the Identity Platform (SA IdP) theme.
   

In this article

• Method 1: 2016 Light Theme
• Method 2: 2019 Theme
• Method 3: Identity Platform (SA IdP) Theme
• Setting a Different Background Image for an Individual Page

Method 1: 2016 Light Theme

Use this method if the realm uses the 2016 Light theme.

1. On the Identity Provider (IdP) server, place the desired image file in the images folder for the realm: D:\Secureauth\SecureAuth<realm number>\images.
2. Navigate to D:\Secureauth\SecureAuth<realm number>\Themes\2016 Light and make a copy of the existing MFAStyleSheet file, for backup purposes.
3. In the Admin Console, click the Overview tab, then click CSS Editor.
4. Search for @media. The first instance should read:
   

   @media (min-width: 768px) {
   body {
   background-color: #fff;
   }
   }

5. Change background-color: #fff; to:
   

   background-image:url("/secureauth<realm number>/images/<image filename>");

6. Save the file.

Method 2: 2019 Theme

Use this method if the realm uses the 2019 theme.

1. On the IdP server, place the desired image file in the 2019 theme folder for the realm: D:\Secureauth\SecureAuth<realm number>\Themes\2019, and make a copy of the existing MFAStyleSheet file in that folder, for backup purposes.
2. In the Admin Console, click the Overview tab, then click CSS Editor.
3. Search for bg.png, the default background image filename. It appears in the body section:
   

   body {
   width: 100% !important;
   background: url(BG.png) no-repeat;
   background-size: cover;

4. Change url(BG.png) to the new image filename:
   

   body {
   width: 100% !important;
   background: url(<image filename>) no-repeat;
   background-size: cover;

5. Save the file.

Method 3: Identity Platform (SA IdP) Theme

Use this method if the realm uses the Identity Platform (SA IdP) theme, version 24.04. The same setting exists in the MFAStyleSheet.css file for the 23.07 through 24.03 releases, but the exact line number may differ from what is shown below.

Which section of the file to edit depends on whether Release Updates have been applied to the realm.

If Release Updates have not been applied:

1. On the IdP server, open the MFAStyleSheet.css file, located in D:\Secureauth\SecureAuth<realm number>\Themes\SA IdP.
2. On line 474, in the body section, add:
   

   background: url("/SecureAuth<realm number>/images/<image filename>") no-repeat center center fixed;
   background-size: cover;

If Release Updates have been applied:

1. On the IdP server, open the MFAStyleSheet.css file, located in D:\Secureauth\SecureAuth<realm number>\Themes\SA IdP.
2. On line 1247, in the post-auth-view section, add:
   

   background: url("/SecureAuth<realm number>/images/<image filename>") no-repeat center center fixed;
   background-size: cover;

Place the background image file in D:\Secureauth\SecureAuth<realm number>\Images.

Setting a Different Background Image for an Individual Page

The methods above change the background image for the entire realm, so every page displays the same image. To use a different background image on one specific page instead, complete the following steps after setting the realm-level background image using one of the methods above.

1. Upload the desired image to the \images folder of the realm.
2. Locate the HTML file for the specific page and theme in the \Themes folder, for example: Themes\2016 Light\views\SecurePortal\SecurePortal.html.
3. Open the file in a text editor and add the following to the beginning of the file, adjusting the path to match the image uploaded in step 1:
   

   <style>
     body {
       background-image:url("/secureauth<realm number>/images/<image filename>");
     }
   </style>

SecureAuth Knowledge Base Articles provide information based on specific use cases and may not apply to all appliances or configurations. Be advised that these instructions could cause harm to the environment if not followed correctly or if they do not apply to the current use case.

Customers are responsible for their own due diligence prior to utilizing this information and agree that SecureAuth is not liable for any issues caused by misconfiguration directly or indirectly related to SecureAuth products.