Background Overlay
Add to a section with a background image to add an overlay
Note: While the module is selected the overlay will not fill the section, click outside of the module to see how the overlay will appear live. In the page editor only the module will render a notice to make removing/editing the module easier.
Content
- Select the type of overlay you want (none, full, medium, light)
Note: Edit these global styles from your Theme Settings under the Components > Hero section.
- Change the background overlay color
About This Module
The Background Overlay module is designed to work as a companion element within sections that already have background images. Rather than creating visual content on its own, this module enhances your existing backgrounds by adding a colored layer that improves text readability and creates more professional-looking hero sections, banners, and content blocks.
You’ll typically add this module to sections containing hero content, call-to-action areas, or any section where text appears over background images. The overlay helps ensure your headlines, body text, and buttons remain legible across different screen sizes and devices, even when background images have varying contrast levels.
When setting up the module, remember that the overlay effect won’t be visible while the module is actively selected in the HubSpot page editor. This design choice prevents the overlay from interfering with your editing workflow. To preview how your overlay will appear to visitors, simply click elsewhere on the page or use the preview function.
The four overlay intensity options (none, full, medium, light) correspond to different opacity levels defined in your theme settings. You can customize these global opacity values by navigating to Design Manager > Theme Settings > Components > Hero section. This ensures consistent overlay styling across all pages that use this module.
Best practices include using darker overlays for light-colored text and lighter overlays when you need subtle background dimming. The color picker allows you to match your brand colors or create specific moods—try deep blues for professional feels or warm grays for softer appearances. This module works particularly well on landing pages, about pages, and service detail pages where visual impact is crucial for engagement.