The Overlay Transparency setting acts as a brightness control for your background image. It adds a dark layer on top of the image, letting you adjust exactly how much of the original image shows through: at 100%, the original image is displayed, while at 0%, the overlay becomes fully opaque, resulting in a completely black image.
Background images that are too vivid, bright, or visually complex can make overlaid text difficult to read. Poor contrast between text and imagery is one of the most common usability issues on the web and one of the easiest to overlook.
You can find the Overlay Transparency setting directly in the backend. This option is only available for Heros, as they are designed to display text over images. When editing a Hero, you will find a dedicated field to adjust this value.
By adjusting the overlay transparency, you darken the image without touching the original file. This improves the contrast between your text and the image, making content easier to read.
Adjusting this setting is also a straightforward way to move closer to accessibility standards (such as WCAG contrast requirements), which recommend a minimum contrast ratio between text and its background. A well-chosen overlay value helps you meet those guidelines while keeping your design visually engaging.