# Root

As mentioned before, the `root` element can be used to customise the background of your image.

<table><thead><tr><th width="186">Property</th><th>Description</th></tr></thead><tbody><tr><td><strong>background_color</strong></td><td><p>3 filling modes are available:</p><ul><li><p><code>Monochrome</code>:  String: 6-8digits hexadecimal color </p><p><a href="#image-background">Go to Monochrome Color documentation</a></p></li><li><code>Linear gradient</code><br><a href="#linear-gradient">Go to Linear Gradient documentation</a></li><li><code>Cmyka</code>:  String started with cmyka (only for print)<br><a href="#cmyka">Go to Cmyka documentation</a></li></ul></td></tr></tbody></table>

### Monochrome Color <a href="#image-background" id="image-background"></a>

Monochrome supported formats are:

* **6 hexadecimal digits** with a starting **`#`**:&#x20;
  * Specified with: `#RRGGBB`. **RR** (red), **GG** (green) and **BB** (blue)
  * Example: <mark style="color:blue;">#0000FF</mark>
* **8 hexadecimal digits** with a starting **`#`**:&#x20;
  * This format is an extended version of the 6 hexa digits, allowing to define an opacity to the color.
  * Specified with: `#RRGGBBAA`. **RR** (red), **GG** (green), **BB** (blue) and **AA** (alpha)
  * Example: <mark style="color:blue;">#0000FF80</mark> represents the blue color with a 50% opacity (`80`).
  * **Here is the representation list of opacity (in percentage) to hexadecimal**: *(you can also find all values in* [*this codepen*](https://codepen.io/chriscoyier/pen/XjbzAW)*)*

| Opacity (on a scale to 0-100) | AA (Alpha Hexadecimal) |
| ----------------------------- | ---------------------- |
| 0                             | **`00`**               |
| 5                             | **`0D`**               |
| 10                            | **`1A`**               |
| 20                            | **`33`**               |
| 30                            | **`4D`**               |
| 40                            | **`66`**               |
| 50                            | **`80`**               |
| 60                            | **`99`**               |
| 70                            | **`B3`**               |
| 80                            | **`CC`**               |
| 90                            | **`E6`**               |
| 100                           | **`FF`**               |

{% hint style="warning" %}
3 hexadecimal colors are not supported (such as`#AAA`)
{% endhint %}

### Linear gradient <a href="#linear-gradient" id="linear-gradient"></a>

A linear gradient property can be used as `background_color` (banner background, button) & `color` (text).

The linear gradient format is represented as:

```
linear-gradient(x1% y1% x2% y2%,offset_color1% hexa_color1 opacity_color1,offset_color2% hexa_color2 opacity_color2)
```

| Gradient properties                | Description                                                                                                     |
| ---------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| `x1, y1, x2, y2`                   | Number (Percentage), can be negative. **Define the straight line that will be used to draw the background.**    |
| `offset_color1`, `offset_color2`   | Number (Percentage), can be negative. **Define the offset of the starting & ending points** (default: 0%, 100%) |
| `hexa_color1`, `hexa_color2`       | String: 6 digits hexa color. **Starting & ending colors**                                                       |
| `opacity_color1`, `opacity_color2` | Float (between 0 & 1). **Opacity of starting & ending colors**                                                  |

### Cmyka Color <a href="#cmyka" id="cmyka"></a>

[Cmyka](https://en.wikipedia.org/wiki/CMYK_color_model) supported formats are:

* **4 numbers digits**  starting **`cmyka(`**:&#x20;
  * Specified with: `cmyka(c,m,y,k)`. cyan, magenta, yellow, and black
  * each number are between 0 to 100
  * Example: `cmyka(0,0,0,0)`
* **5 numbers digits**  starting **`cmyka(`**:&#x20;
  * Specified with: `cmyka(c,m,y,k,t)`. cyan, magenta, yellow, black and alpha transparancy
  * each number are between 0 to 100
  * Example: `cmyka(0,0,0,0,100)`

### **Examples:**

<table data-header-hidden><thead><tr><th width="352"></th><th></th></tr></thead><tbody><tr><td><p><strong>Monochrome:</strong></p><p></p><p><code>"background_color": "#610000"</code></p></td><td><img src="https://3568284716-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHvY8mOYKzvcoxVpCu4FE%2Fuploads%2FQB78tryYagkIIgyrT7GD%2Froot-bg-monochrone-b11bae81.jpeg?alt=media&#x26;token=fc803c90-c0c2-4863-907f-a6316ac210c9" alt=""></td></tr><tr><td><p><strong>Cmyka:</strong></p><p></p><p><code>"background_color":"cmyka(0,100,100,62,100)"</code></p></td><td><img src="https://3568284716-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHvY8mOYKzvcoxVpCu4FE%2Fuploads%2FQB78tryYagkIIgyrT7GD%2Froot-bg-monochrone-b11bae81.jpeg?alt=media&#x26;token=fc803c90-c0c2-4863-907f-a6316ac210c9" alt=""></td></tr><tr><td><p><strong>Linear gradient (horizontal):</strong></p><p><br><code>"background_color": "linear-gradient(0% 0% 100% 0%,0% #1a47ff 1,100% #b65151 1)"</code></p></td><td><img src="https://3568284716-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHvY8mOYKzvcoxVpCu4FE%2Fuploads%2FzScMGeuAvRC2g9SzNias%2Froot-bg-gradient-horizontal-f49ed557.jpeg?alt=media&#x26;token=1ea0b292-f4d9-4278-91a0-9edec3bae169" alt=""></td></tr><tr><td><p><strong>Linear gradient (vertical):</strong></p><p><br><code>"background_color": "linear-gradient(0% 0% 0% 100%,0% #1a47ff 1,100% #b65151 1)"</code></p></td><td><img src="https://3568284716-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHvY8mOYKzvcoxVpCu4FE%2Fuploads%2FLoVlJqdlMseNruqqudCx%2Froot-bg-gradient-vertical-8a46600a.jpeg?alt=media&#x26;token=4c14c974-0471-4753-b363-b39a94d40be0" alt=""></td></tr><tr><td><p><strong>Linear gradient (diagonal):</strong></p><p><br><code>"background_color": "linear-gradient(0% 0% 100% 100%,0% #1a47ff 1,100% #b65151 1)"</code></p></td><td><img src="https://3568284716-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHvY8mOYKzvcoxVpCu4FE%2Fuploads%2FVA6yDASHUPdFy0Wd8SyL%2Froot-bg-gradient-diagonal-a2a1f716.jpeg?alt=media&#x26;token=96a2fb8d-0eab-485e-a14c-bfc65bc6e48e" alt=""></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.abyssale.com/rest-api/generation/element-properties/root.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.