Configure the home page background

---
title: Configure the home page background
description: Set a solid color, gradient, or image background for the home page, and match the logo and text color to the background.
locale: en-US
canonical_url: https://www.servicenow.com/docs/r/australia/employee-service-management/employee-experience-foundation/eslate-configure-home-page-background.html
release: australia
product: Employee Experience Foundation
classification: employee-experience-foundation
topic_type: task
last_updated: "2026-09-02"
reading_time_minutes: 1
keywords: [home page background, branding and theming, gradient, Employee Slate]
breadcrumb: [EmployeeWorks home, ServiceNow EmployeeWorks Web App, EmployeeWorks, Employee Service Management]
---

# Configure the home page background

Set a solid color, gradient, or image background for the home page, and match the logo and text color to the background.

## Before you begin

Role required: admin or Employee Slate administrator.

## About this task

Configure the home page background separately for light mode and dark mode. Choose a solid color, a gradient, or an image for each mode, then set the logo and text color to match.

## Procedure

1.  Go to the **Homepage background** section in **Branding and theming** in the Admin Console.

2.  For **Light mode** or **Dark mode**, select a **Background type**: **Solid**, **Gradient**, or **Image**.

    Configure each mode independently. Select **Reset to Default** at any time to revert that mode to its original background.

3.  For a solid color, select a color from the color picker or enter a color code, then select **Apply**.

4.  For a gradient, enter a value in the **CSS gradient** field, or use the calculated gradient from the accent color.

    A confirmation message tells you whether the background meets accessibility standards for text contrast.

    \[Omitted image "es-home-page-background-config.png"\] Alt text: Homepage background page showing the gradient background type with a CSS gradient field and an accessibility contrast confirmation message

5.  For an image, upload a PNG file and set the image behavior to **Fill** or **Repeat pattern**.

6.  Select a value from the **Logo and text color** list to match the logo and text color to the background.

    For example, select **Light mode \(Dark text\)**.

7.  Use the **Light**, **Dark**, **Desktop**, and **Mobile** toggles in the **Preview** panel to check the background before you save.

8.  Select **Save**, then refresh the home page to confirm the change.


## Result

The configured background renders on desktop and mobile, in both light and dark mode.