Full and Content Overlays

Hero Image PLUS provides two independent overlay types.

Both overlays may be used separately or together.

Full-Background Overlay

The full overlay covers the complete hero area.

Use it to:

• Darken or tint a background image
• Improve text contrast across the complete hero
• Apply a brand color to the full image

Options:

• Enable or disable
• Theme color or custom color
• Opacity from 0% to 100%

Content-Only Overlay

The content overlay is displayed behind the defined content area only.

Use it to:

• Improve readability without tinting the complete image
• Create a panel behind headings, text, images, icons, and buttons
• Separate content visually from a detailed background

Options:

• Enable or disable
• Theme color or custom color
• Opacity from 0% to 100%
• Horizontal inner spacing from 0 to 200 pixels
• Vertical inner spacing from 0 to 200 pixels
• Corner radius from 0 to 200 pixels

Color Sources

Theme Color

Theme colors come from the active Concrete CMS theme color collection.

Using a theme color helps the hero follow the site's design system.

Custom Color

Custom colors accept valid:

• HEX values
• RGB values
• RGBA values

Examples:

• #6f42c1
• rgb(111, 66, 193)
• rgba(111, 66, 193, 0.8)

Overlay opacity is configured separately from the color value. When using RGBA, consider the combined effect of the RGBA alpha value and the overlay-opacity setting.

Combining Overlays

A common configuration is:

• A subtle full-background overlay to unify the image
• A stronger content-only overlay to ensure readable text

Test the result with the actual foreground text, image, and screen sizes.