# Foreground and background

> Learn how to create and apply foreground and background in your project. Utilize interactive components and manage states effectively for enhanced user experience.

https://docs.pandasuite.com/essentials/project-properties/foreground-and-background/

**Create foreground/background and apply them to your screens/states. It will allow you for instance to create an interactive menu, an animated background...**

Foregrounds and backgrounds are common to your project: they will be displayed above or below your current screens/states.

[Image: Diagram of three pages side by side: behind Page 2, a green background layer; in front of it, a foreground layer holding a menu bar]

They are edited like states: you can add your content, create new states, add components, interactive actions...

On each screen and state, you have to define the foreground and the background you want: you can also choose not to have any foreground or background.

## 1. Create foreground/background

1. Click the home icon above the workspace to go to the **Project** level, then select **Foregrounds** or **Backgrounds**.
2. Insert your content in the first one. There is always a default foreground/background that is empty. If you want to add another one, click on the **+** button at the top of the list.

> **Info**
>
> **Please note**: if you only have one foreground/background, it will
> automatically apply to every screen/state.

If you want to have a clear overview of what you're doing, in the **Properties** panel, set **Hide screens** to **Yes** (and eventually **Hide foregrounds / backgrounds**): that way you'll only see the level you're currently working on.

[Image: Properties panel of a foreground: color, then the Hide screens, Hide foregrounds and Hide backgrounds options, set to Yes or No]

## 2. Apply foreground/background

Once you've created your foregrounds/backgrounds, you'll need to apply them to your current screens/states: otherwise, they'll remain hidden forever in this studio! :-)

1. Go back to the **Project** level and select **Screens**.
2. Select your screen or state: its **Properties** panel shows a **Foreground** and a **Background** list.
3. Select the foreground/background you want, or **Current** if you want to keep the foreground/background that was previously defined in your user path.

> **Info**
>
> **Please note**: if you apply a foreground/background to a screen, it will
> automatically apply to all its states. However, you'll still be able to edit
> this at each state level.

[Image: Properties panel of a screen: the Background list is open, with Current Background and 1. Background]

> **Info**
>
> **Please note**: “no foreground (background)” is not an option for now. If it
> is what you want and you've already created foregrounds (backgrounds), we
> recommend you create an empty foreground (background) to add to your list and
> apply it to your current screens/states.