> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.teleporthq.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How can I change the background of an element?

**When you want to add a background to a container you have multiple options: flat color, gradient, background image or even background video. Here's all you need to know.**

|    |    |    |
| --- | --- | --- |
| [1. Color background](#2-color-background) | [2. Gradient background](#2-gradient-background) | [3. Image background](#2-image-background) |
| [4. Video background](#2-video-background) | [5. Advanced panel editing](#-advanced-panel-editing) |    |

To change the background you need to select the container or element, and go to the **Right side menu**. Scroll down to the "Background" section in which you can choose from multiple options including:  *background color, gradient or background image*.

## Color background

When selecting color background you will be prompted with a color picker where you can choose the color you want or add the color code. You can also change the opacity of the background color.

![How to add flat color backgrounds](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/1-backgrounds_1jtjzpl.gif)

## Gradient background

Similar to color backgrounds, when selecting a color background you will be prompted with a gradient color picker where you can change the type of gradient, color or radial as well as the colors, direction and opacity.

![How to add a gradient background](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/2-backgrounds_703gpp.gif)

## Image background

To add an image as a background to a container from the dropdown menu select Image. Next go to the left panel, **Assets manager** and click the replace icon on an image. To edit the image background, from the **Right panel -> Background section** click on the image. This will open a panel where you can change the **size, position and repeat** properties.

![How to add an image background](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/3-backgrounds_18z9gv8.gif)

## Video background

To learn how to add a video as a background please check out this [article](/en/article/how-to-add-a-video-background-to-a-container-u8cipz/).

## Advanced panel editing

You also have additional options in the **Advanced tab**, for further customization.

![Advanced background customization](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/background-advanced-options_529e58.png)