February 12, 2024 / 1 minute

Customise your Backoffice Login

Starting from v13 you can now add your own look to the login screen!

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
    {
  "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.

💖