> ## 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 to use and customize Images in your website

**Find out everything you need to know about images and how to use them in TeleportHQ.**

${youtube}[How to add images](jh6Bc6SP9To)

| [1. Uploading images](#2-uploading-images) | [2. Adding images in containers](#2-adding-images-in-containers) | [3. Customizing images](#2-customizing-images) |
| [4. Image settings](#2-image-settings) | [5. Adding links to images](#2-adding-links-to-images) | [6. Background images](#2-background-images) |

## Uploading images

After you open one of your projects, in the Left Side Menu you will notice the area called **Assets Manager**. In the first Tab, Uploads, click on the **Upload assets** button or simply drag and drop the file in that area. 

![Uploading images to project](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/1-upload-images_1vg22ri.png)

## Adding images in containers

To add images in the project you can either **drag and drop directly on the canvas** or in the **tree view**, in the appropriate container. To change an image that was already placed, just drag the new one over the one you want to change, hold **CTRL/CMD** and drop.

![Adding images to containers](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/2-adding-images-to-containers_ccm5m7.gif)

## Customizing images

To customize your images go to the **Right panel**. Look for the area called **size section** to change the size of your image. You can use different units of measurement such as: px, em, rem or %. In this panel you will also add borders, set a radius or shadow on an image. 

To add interactions to an image, like a **hover effect** you need to go to the **Right Panel** and in the **State** section, select the effect you want to apply and define it using CSS rules.

![Customizing images](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/3-customizing-images_3jjycd.gif)

## Image settings

There are also some additional image options in the Image section of the Right Panel like **Img alt**, which is used for search engine optimization and **Loading**, which determines the way images are loaded during a session.

![Editing image options](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/3-images-options_1ccq1bk.gif)

## Adding links to images

To add a link on an image you just need to select it in the canvas and click the link icon above the selection.

![Adding hyperlinks to images](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/4-links-on-images_js19yv.gif)

## Background images

To add a background image, follow these steps:

* Select the container you want to edit
* Go to the assets manager
* Right click on the image you want to set as background image
* Click **“Set as background image”**

![Setting image background](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/5-setting-background-image_1ewqokj.gif)