> For the complete documentation index, see [llms.txt](https://docs.morpht.com/convivial-for-govcms/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.morpht.com/convivial-for-govcms/concepts-and-tools/overlays.md).

# Overlays

An overlay is a tint or gradient laid between a background image and the content in front of it, so that text stays legible whatever the photo underneath. Whenever a component or banner has a background image, it should normally have an overlay too.

See a banner overlay on the demo site: <https://govcms.convivial.io/demo/content/test-banner-background-image>

![Text kept legible by an overlay](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-0a0eb77319e6f2f21103c22ea374d50bf0022e92%2Foverlays.png?alt=media)

The **Overlay** field offers:

* **Linear** — a gradient from one edge (*Start*, *End*, *Top*, *Bottom*) or corner, useful when the text sits on one side of the image.
* **Radial: Center** — darkens the middle, for centred headings.
* **Tint** — a flat wash of the palette background at *Strong* (80%), *Medium* (60%) or *Weak* (40%) opacity.

The overlay is painted in the palette's background colour, so choose the palette first and the overlay will match. Content inside an overlaid component also gets a drop shadow on its text.

Where to set it: a component's Presentation group (with an [Image Background](/convivial-for-govcms/concepts-and-tools/modifiers.md) or video modifier), and the page banner via the Themer's Regions settings, where a **Banner overlay** applies whenever a banner background image is used.