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