# Background Colors

Allows you to add a background and/or overlay colour to the background.

<figure><img src="https://lh5.googleusercontent.com/hCalinQjVFaYk-5hGpOZpG_VEwVcZzjf51nqWaIMAlcUvHFx-udiYTHPxEYDuESxhDyic9x1XbQWJ9gZcVi_-IzDttl5YR-J0lzU9CBOFJD5K9vN4mDGDFSNyOB8fxGLYjQfGc7FVYBxZGZrw1O-U_XuOmurpQAWsTe_F_RtitigqlqMbo2tkiwvT7ezfw" alt=""><figcaption></figcaption></figure>

## Background Colour

The Background Colour property defines the colour of the background of the block.

You can choose a colour in the colour picker, a Global Colour or a Colour Gradient which can be linear or radial.

### Add a Background Colour

For blocks with background capabilities:

![](https://lh3.googleusercontent.com/_WPFyuuBJ9m8oQZyUUdM7NEyNN3INCOhGNItB837C3c0E5Ehlp-9RCV-1GKTNMOLEkR8kZCQz1EB6xCX3BCe-VB81mec-6xRMsNv5XlD3jQfJ8O4_cFCRjievTICL4OxOVwRKUYcbk7y6GVB2vz1ZDo9k5hMnGKbLVUgagzcBwXakmea1gZdwl2yYjwEDg)

* Select a block.
* Open the Block Inspector.
* Navigate to the Primary Tab.
* Find the Background property.
* Open the colour picker by clicking on the colour circle.
* Select required colour (colour picker, global colour, gradient (linear or radial)).

To modify any block's background colour:

![](https://lh3.googleusercontent.com/k246hW5Xu6OvtQ157P6LXGQzJl6YUG9lcXH9kMJFrwbnglwiqInUn_thdFGq4F9vLxGR-iEgzOIUfizv3uaRF1N6W2bb-WZAeC1MYhIDjk31P23adNdEIBTdGsoOsfgvONeJbWCpuWk8mjeQXRsX5YTWfFOwzdMh1WGWjDekMJ9nizuDAJt7Mz5hRGsTwQ)

* Select a block.
* Open the Block Inspector.
* Navigate to the Design Tab.
* Open the Background Tab.
* Open the Colours Tab.
* Find the Overlay property.
* Open the colour picker by clicking on the colour circle.
* Select a colour (colour picker, global colour, gradient (linear or radial)).

### Reset Background Colour

For most blocks with background capabilities:

![](https://lh3.googleusercontent.com/4JTfaublJi4nsczM3ZawegtL8gzq4bxnyo78DTczSPXIir08rg6ktskj0JDv0H_ixhcN5kOE702S1z6SYbHqt1OSFRCe-c3SLKMlfrOyzBkI3KETKVoa54QACEVTh6xqtCI92UL7zfKCR0QJ3kEFcwBGvGsDDF90YRvGkYHRhM3TxDPZIVJKDXIsauaN4Q)

* Select a block.
* Open the Block Inspector.
* Navigate to the Primary Tab.
* Find the Background property.
* Click dot to reset.

To reset any block's background colour:

![](https://lh6.googleusercontent.com/mGVcLBSx33Q3TFTqxWo15byT4-1eiyTMZpOrC7QU42tYDzzrJ9lWkYe_EMgyJ_I6lYPwtU3ch5cn7e3ZXYSStVn2Bl1DENR3ckaZcBRHMhhpWZfJbh1M6aAqNHYWPO_vZl3oYLP3dZOx8JQS0wWz_lX0KibF-rS4Jofii-vmbp2s8sZ_OuUryzqaj3F-kg)

* Select a block.
* Open the Block Inspector.
* Navigate to the Design Tab.
* Open the Background Tab.
* Find the Background property.
* Click dot to reset.

## Overlay Colour

<figure><img src="https://lh5.googleusercontent.com/SSpOAbItJeChUc6FitgGajB3qXKzNxloS8HLYhkESPGb7S0GqWChw7RHfLCO863JASJaw8GJmtf_OOnirRUaQhZSYd3sow22PMbcqvt1OLrUmHeKNUuywEjmt7oMoKeN6TcsQEB_AAhqY3CmsYCTVqs" alt=""><figcaption></figcaption></figure>

The Background Overlay property defines the colour of the overlay that covers the block.

{% hint style="info" %}
Overlay works on all blocks except images.
{% endhint %}

### Add an Overlay Colour

<figure><img src="https://lh5.googleusercontent.com/3xA_UJcLq8jgR_053Q0r2HpdX6kGthXRTmobifGX_YK5RxTyZ3CrXZdrXcGnUH5PU2IA46Js2kPGzZtWehVBbs9HtHEAJbTdAfO_FXGVZ4mG2z9QeDo53ihImIHjy0Bvp8F0N-8qSLluozpnANYTdxc" alt=""><figcaption></figcaption></figure>

* Select a block.
* Open the Block Inspector.
* Navigate to the Design tab.
* Open the Background tab.
* Open the Colour tab.
* Find Overlay.
* Open the colour picker by clicking on the colour circle.
* Select a colour (colour picker, global colour, gradient (linear, radial or conical)).

### Reset Overlay Colour

* Select a block.
* Open the Block Inspector.
* Navigate to the Design Tab.
* Open the Background Tab.
* Open the Colours Tab.
* Find the Overlay property.
* Click dot to reset.

<figure><img src="https://lh3.googleusercontent.com/7VhruI-bu_ndxdfNNMgh199XWIFsL3p2F4I3A8T1SYI50G1wdl9MKfas7DrXOr0D8wKuvM4tySdwX71f537yVPvPVSp3Bbl3k0e6VFt6hnuvQDlCwDD4EtdIsejZ4AUYFaQuIt0OMuYESKzTWSVbdCc" alt=""><figcaption></figcaption></figure>

* Without Overlay.

<figure><img src="https://lh3.googleusercontent.com/JKuvbJiZjoCPw8TSG6nY9MbMBJNuOB4z1rtohNVsRYWXsagBIdxEne99UzUP1xOeK30f8hXAXGrWnFDb7To0fV1EqOXVEdJ6OFXOimXl6qY3JShaV2j4U88XIdAGEs1vdX7bTceBYQPtFSRzlqDRDH4" alt=""><figcaption></figcaption></figure>


---

# 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://docs.cwicly.com/design/backgrounds/background-colors.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.