.css, .sass or .less

Let's see, as an example, the different ways you have to change the backgrounds image of the login page.

First let's download a background image an put it in our public directory:

If you wish to do so, you can hot swipe assets that you have placed into your public directory in your Keycloak instance files at:

/opt/keycloak/themes/<name of your theme>/<login|account>/resources/dist

Let's apply this image to the body using plain CSS

src/login/main.css

body.kcBodyClass {
  background: url(/background.png) no-repeat center center fixed;
}

We import the StyleSheet:

src/login/KcPage.tsx

import "./main.css";
import { Suspense, lazy } from "react";
// ...

Result (see testing your theme):

Custom background successfully applied

If you prefer, you can also move the background.png image from public/ to, for examples, src/login/assets/background.png and reference the image with a path relative to the CSS file, in this case it would be:

src/login/main.css

body.kcBodyClass {
  background: url(./assets/background.png) no-repeat center center fixed;
}

In the following video I show how to load different background for different page and how to create theme variant.