Customise your Backoffice Login

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.