> ## 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).

# Background Styles

# Getting Started

You can change the visual appeal of your website with customizable background styles. This article will guide you through adding background style options like solid colors, gradients, images, and videos in sections, containers, and elements.

---

# Background Styles

The Background feature offers four different options. Here they are:

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


|| 📌 Note: Background options vary depending on whether you are customizing a section, container, or element. Not all features are available for every component.

---

## 1️⃣ Solid Color Background

This option allows you to apply any solid color as the background. *Refer to the GIF & screenshots below*:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-06-02-at-32_gblh3k.gif)


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


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

---

## 2️⃣ Gradient Color Background

This option lets you select and customize various gradient colors for the background. *Refer to the GIF & screenshots below*:

☑️ Gradient background Color feature comes up with 3 options which are **Simple**, **Advance,** and **Library**.

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


### Simple:

This option allows you to select and customize two gradient colors, specifying the start and end colors from the palette. ⬇️


${youtube}[Gradient Background Style | Simple](CfwN0lx6OPo)


### Advance:

Advanced Gradient Color Picker lets you choose multiple colors and use various types of gradients.  ⬇️

${youtube}[Gradient Background Style | Advance](wcgMI4i7cAs)


### Library:

You can choose your Global Gradient colors from this option to use it  ⬇️

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-06-02-at-34_1dmyhq1.gif)


![Global Gradient Colors](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_6x0qei.png)


---

## 3️⃣ Background Image

To add any image as a background image you can use this option. *For the visual demonstration refer to the GIFs and screenshots below*:


### Upload image:

You can upload any image to set it as the background for your section, container, or element.

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

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-06-02-at-41_1r94zut.gif)



### Image Library:

You can also select an image from your site's `Image Library`. Click the `Upload Image` button, navigate to the `Image Library` tab, hover over your preferred image, and click the `Insert` button.

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-06-02-at-42_1p4ej4n.gif)


### Generate Images with AI:

You can generate background images using Dorik AI. Click the sparkle (✨) icon next to the image URL option, select the image **type** and **size**, and provide the **details** of the image you want. Once the image is generated, **hover** over it and click the `Insert` button to use it as your section background.


${youtube}[Generate Background Image with AI](8MfjaRQ0oPM)

---

## 4️⃣ Background Video:

You can add videos as a background. The supported video formats are **MP4** and **WEBM**.

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


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-06-02-at-45_1gtk95e.gif)

---

# Related Articles


[Changing Site language](/en/article/changing-site-language-1a4vk4w/)

[Site Settings](/en/article/site-settings-1kln2if/)