# .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://723341942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1pGOu8uVH5l8KqPEPmKi%2Fuploads%2FTMAqGEmQ2Ga8JA7rTVfP%2Fimage.png?alt=media&#x26;token=aae0f7ed-029a-46bc-ac29-03ec3bc3eebe" 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://doc-old.keycloakify.dev/documentation/v10/configuration-options/themename)**/\<login|account>/resources/dist**

<img src="https://723341942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1pGOu8uVH5l8KqPEPmKi%2Fuploads%2FR0ZOz4hUemcc4cBwcq7e%2Fimage.png?alt=media&#x26;token=f512b20f-198e-4c47-8589-f8a0f67783e7" 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://doc-old.keycloakify.dev/documentation/v10/testing-your-theme)):

<figure><img src="https://723341942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1pGOu8uVH5l8KqPEPmKi%2Fuploads%2FeyBr07gErLTQ9SbOrz4V%2Fimage.png?alt=media&#x26;token=bf6c3f09-eec9-453a-91e9-a2eb5679d58d" 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://doc-old.keycloakify.dev/documentation/v10/theme-variants).

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