# .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](https://coolbackgrounds.io/) an put it in our public directory:

<figure><img src="https://44298030-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF8p3pI4iUxXJKhqvIFHv%2Fuploads%2Fgit-blob-e9b4969ed8fcb1b1dbbf83ce1f431a4949939b84%2Fimage%20(25).png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
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>**](https://docs.keycloakify.dev/keycloakify/v10/configuration-options/themename)**/\<login|account>/resources/dist**

<img src="https://44298030-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF8p3pI4iUxXJKhqvIFHv%2Fuploads%2Fgit-blob-df8d4a5ced17260f74f37087d4bbc82746731cb2%2Fimage%20(28).png?alt=media" alt="" data-size="original">
{% endhint %}

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

{% code title="src/login/main.css" %}

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

{% endcode %}

We import the StyleSheet:

<pre class="language-tsx" data-title="src/login/KcPage.tsx"><code class="lang-tsx"><strong>import "./main.css";
</strong>import { Suspense, lazy } from "react";
// ...
</code></pre>

Result (see [testing your theme](https://docs.keycloakify.dev/keycloakify/v10/testing-your-theme)):

<figure><img src="https://44298030-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF8p3pI4iUxXJKhqvIFHv%2Fuploads%2Fgit-blob-71d7fd75c0c5775fe245dce9c3b6c7ecabfd8efc%2Fimage%20(26).png?alt=media" alt=""><figcaption><p>Custom background successfully applied</p></figcaption></figure>

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:

{% code title="src/login/main.css" %}

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

{% endcode %}

In the following video I show how to load different background for different page and how to create [theme variant](https://docs.keycloakify.dev/keycloakify/v10/theme-variants).

{% embed url="<https://youtu.be/Nkoz1iD-HOA?si=hBXt8rw72-Pvhhnr>" %}