Customising Umbraco: Login

Add your own look to the Umbraco login screen!

February 12, 2024 / 1 minute
Information

The Umbraco backoffice login screen is something all editors, administrators, translators and developers alike will see. 

Usually found at /umbraco, it is the entry point to your CMS.

The Umbraco backoffice login screen in version 13.
The Umbraco 13 login screen

Make it your own

It's possible to customise the following elements of the login screen using environment variables or your appsettings.json configuration file:

  • Background Image
  • Logo Image
  • Logo Image Alternative (v13+)
    • Used on small resolution displays
appsettings.json
{
  "Umbraco": {
    "CMS": {
      "Content": {
        // Paths relative to wwwroot/umbraco
        "LoginBackgroundImage": "../umbraco-login-background.png",
        "LoginLogoImage": "../umbraco-login-logo.svg",
        "LoginLogoImageAlternative": "../umbraco-login-logo-alt.svg"
      }
    }
  }
}
Make sure your image paths are relative to wwwroot/umbraco

 

Umbraco 13 backoffice login screen with a custom image of a cat using his laptop
Umbraco 13 login screen with custom logo and background image

Check out the official documentation here to learn more.