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

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