Changing the background image
Let's see, as an example, the different ways you have to change the backgrounds image of the login page using CSS only.
First let's download a background image an put it in src/login/assets/background.png.
Then let's apply it as background:
body.kcBodyClass {
background: url(./assets/background.png) no-repeat center center fixed;
}
We import the StyleSheet:
import "./main.css";
// ...
Result:

For a more advanced example, in the following video I show how to load different background for different page and how to create theme variant.
Last updated
Was this helpful?