> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.dorik.com/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).

# Image Element

# Getting Started

You can add images to your website by using the Image element. This article will feature all the steps required to add an image to your website. Follow the instructions accordingly to add, shape, and customize an image on your website.

---

# Adding the Image element

Follow the steps below to add an **Image** element to your site. 

- Click on + **Add Element or Containers** in an empty Container
- From the **Elements** option, select the **Image** element

**Refer to the GIF & screenshots below:**


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2023-12-26-at-11_1gn3zno.gif)


![Image Element](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1dgoq37.png)


![Image element on builder](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_d1nfpm.png)

---

# Editing the Image element

Follow the steps and instructions below to add and edit an **Image** element on your site.

The **Image** element editor has the following options:

- Image options
- Image Width and Height
- Filters
- Background Image

The **Image** element editor**:**

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_jt1t5q.png)

---

## Image Options

Here are some options for working with images: you can upload a new image, select one from your library, or use a URL to embed an image. You can also **generate an image using AI** for your element, and make additional edits such as adjusting alignment or adding links.

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2023-12-26-at-15_d5h0l.gif)

---

## Image Width and Height

This setting allows you to resize your image by changing its width, height, and position. You can also choose to fit the image, and there are advanced options for minimum and maximum width and height.

Refer to the **Video** below to see all the settings demonstrated:

${youtube}[Image Width and Height](6JhxPBd1AOQ)

---

## Filters

This option lets you edit your image with necessary settings like changing the hue, saturation, contrast, brightness, and many more.

Refer to the **GIF** below to see all the settings demonstrated:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2023-12-26-at-22_1xe6xwk.gif)

---

## Background of Image

This option lets you add a background to your image; it can be a plain color, gradient, or another image.

Refer to the **GIF** below to see all the settings demonstrated:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2023-12-26-at-23_1asg5g7.gif)

---

---

### Related articles


[Add an Image Slider](/en/article/add-an-image-slider-1gfplok/)

[Add Custom Code](/en/article/add-custom-code-19siwk8/)