# 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.
{% hint style="info" %}
There is the equivalent of this guide using CSS-in-JS [here](https://docs.keycloakify.dev/common-use-case-examples/changing-the-background-image-css-in-js).
{% endhint %}
First let's [download a background image](https://coolbackgrounds.io/) an put it in **src/login/assets/background.png**.
Then let's apply it as background:
{% code title="src/login/main.css" %}
```css
body.kcBodyClass {
background: url(./assets/background.png) no-repeat center center fixed;
}
```
{% endcode %}
We import the StyleSheet:
{% tabs %}
{% tab title="React" %}
import "./main.css";
// ...
{% endtab %}
{% tab title="Angular" %}
import "./main.css";
import { getDefaultPageComponent, type KcPage } from '@keycloakify/angular/login';
// ...
{% endtab %}
{% tab title="Svelte" %}
<script lang="ts">
import "./main.css";
...
{% endtab %}
{% endtabs %}
Result:
Custom background successfully applied
Replacing the image without re-building the theme
If you want to be able to "hot swipe" the image, without rebuilding the theme you have to import the image from a different location.
Place the file into **/public/background.png**.
Then, in your CSS code import the image with an absolute path:
{% code title="src/login/main.css" %}
```css
body.kcBodyClass {
background: url(/background.png) no-repeat center center fixed;
}
```
{% endcode %}
Now if you want to replace the image directly in Keycloak you'll be able to find it at:
**/opt/keycloak/themes/**[**\**](https://docs.keycloakify.dev/features/compiler-options/themename)**/login/resources/dist/background.png**
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](https://docs.keycloakify.dev/features/theme-variants).
{% embed url="" %}
.png?alt=media)
.png?alt=media)