# Changing the background image - CSS-in-JS {% tabs %} {% tab title="Vite" %} {% hint style="info" %} TLDR: There is nothing specific to Keycloakify about importing assets. You can do it however you would in any other project. Just if you're referencing assets that are in the public directory, use `import.meta.env.BASE_URL` {% endhint %} {% endtab %} {% tab title="Webpack" %} {% hint style="info" %} TLDR: You can import asset like you would in any other project, one exception being: If you reference assets that are located in your public directory from within your TSX files you must use Keycloakify's polifill of the `PUBLIC_URL` environnement variable, you can't use `process.env.PUBLIC_URL` directly: ```tsx import { PUBLIC_URL } from "keycloakify/PUBLIC_URL";

``` {% endhint %} {% endtab %} {% endtabs %} CSS-in-JS is preferable over plain CSS as it enables for more flexibility and is easier to maintain. Let's see, as an example, the different ways you have to change the background image of the login page. First let's [download a background image](https://coolbackgrounds.io/) an put it in our public directory:

{% 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/**[**\**](/features/compiler-options/themename.md)**/\/resources/dist**

{% endhint %} Let's see how we can apply the image using a CSS-in-JS. In this example we'll use [@emotion/css](https://emotion.sh/docs/introduction). ```bash yarn add @emotion/css ``` {% tabs %} {% tab title="Vite" %}

import { css } from "@emotion/css";
import { Suspense, lazy } from "react";
// ...
export default function KcPage(props: { kcContext: KcContext }) {
    const { kcContext } = props;    
    // ...
    return (
        // ...
        <DefaultPage
            kcContext={kcContext}
            classes={classes}
            // ...
        />
    );
}

const classes = {
    kcBodyClass: css({
        "&&": { // Increase specificity so our rule takes precedence over the default background.
            background: `url(${import.meta.env.BASE_URL}background.png) no-repeat center center fixed`,
        }
    })
} satisfies { [key in ClassKey]?: string };

{% endtab %} {% tab title="Webpack" %}

import { css } from "@emotion/css";
import { PUBLIC_URL } from "keycloakify/PUBLIC_URL"; // You can't use process.env.PUBLIC_URL directly.
import { Suspense, lazy } from "react";
// ...
export default function KcPage(props: { kcContext: KcContext }) {
    const { kcContext } = props;    
    // ...
    return (
        // ...
        <DefaultPage
            kcContext={kcContext}
            classes={classes}
            // ...
        />
    );
}

const classes = {
    kcBodyClass: css({
        "&&": { // Increase specificity so our rule takes precedence over the default background.
            background: `url(${PUBLIC_URL}/background.png) no-repeat center center fixed`,
        }
    })
} satisfies { [key in ClassKey]?: string };

{% endtab %} {% endtabs %} Result (see [testing your theme](/testing-your-theme.md)):

Now let's go a little further, it's even better to let the bundler generate url for your imports instead of manually referencing files from your public directory.\ So, let's move the background image in **src/login/assets/**:

And in our code import it this way:

import { css } from "@emotion/css";
import backgroundPngUrl from "./assets/background.png";
import { Suspense, lazy } from "react";
// ...
export default function KcPage(props: { kcContext: KcContext }) {
    const { kcContext } = props;    
    // ...
    return (
        // ...
        <DefaultPage
            kcContext={kcContext}
            classes={classes}
            // ...
        />
    );
}

const classes = {
    kcBodyClass: css({
        "&&": {
            background: `url(${backgroundPngUrl}) no-repeat center center fixed`,
        }
    })
} satisfies { [key in ClassKey]?: string };

Now let's see how we can go further and apply different background on different pages of our theme: {% embed url="" %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.keycloakify.dev/common-use-case-examples/changing-the-background-image-css-in-js.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.