Shared controls
Backgrounds: Color, gradient, image, video, patterns and light
Every Omni module has the same background controls under Styles → Background. The first one, Color mode, chooses the light or dark palette for the whole section; see Color modes. The rest are below.
On this page
Background type
| Type | How to set it up |
|---|---|
| None (page background) | The section is transparent. |
| Color | Pick a color. It follows the theme's Surface color until you change it (the CTA Band follows Primary). |
| Gradient | Choose two or more colors and a direction. |
| Image | Upload an image at least 1920 px wide – HubSpot serves it scaled to 1920 px, so a larger upload costs nothing. Adjust position and size in the field. |
| Video | Add the video under Content → Background video (see below). |
Overlay
For Image and Video, Overlay color tints the background so text stays readable. Use the opacity slider – 50–75 % works for most photos.
Decorative pattern
Decorative pattern draws a quiet texture over any background: Honeycomb, Grid, Dots, Diagonal lines or Custom image. Set Pattern color with a low opacity – 5–10 % is enough for the pattern to be felt rather than seen. Pattern size takes any percentage from 10 % upwards, and 100 % is the normal size.
For Custom image, upload a small SVG or PNG tile under Pattern image. It repeats across the background, and Tile width sets how wide one repeat is: 0 uses the file's own width (a tile drawn at 1920 × 1080 renders 1920 px wide), and a smaller width makes the pattern denser. Draw tiles so their edges meet, then they repeat without seams.
Light text on dark background
Switch on Light text on dark background whenever the background image, video, gradient or color is dark. Headings, text, outline buttons and switchers change to light colors. Cards with their own white background keep dark text. In Dark color mode the toggle is on by itself and hidden.
Background video
- Set Styles → Background → Background type to Video.
- Open Content → Background video and choose an MP4 from the file manager in Video file (MP4).
- Add a Poster image. It shows while the video loads, on mobile and for visitors who prefer reduced motion.
- Leave Play video on mobile off unless the video is very small – mobile visitors see the poster instead.
Light effect
Light effect adds calm movement behind the content. It works with the None, Color and Gradient background types, and it sits above the pattern and below the text.
| Setting | What it does |
|---|---|
| Light sweep | A soft, blurred light crosses the module in a straight line, then waits outside the edge before the next pass |
| Soft glow | Two large lights drift slowly around the module |
| Light color | The tint of the light. Keep the opacity low (10–25 %) |
| Direction | Left to right, right to left, top to bottom or bottom to top (light sweep only) |
| Loop duration | Seconds for one pass and the pause after it. Lower is faster |
The light sweep is movement only, so it is hidden when animations are off and for visitors who prefer reduced motion. The soft glow stays in place when animations are off.
Recipe – calm hero: Background Color white, pattern Honeycomb in black at 6 %, light effect Light sweep in purple at 16 % and a loop duration of 6.5 seconds.
Good to know
- Keep background videos short, muted and under 5 MB. They always play without sound and loop.
- Visitors who have reduced motion enabled in their operating system see the poster image, never the video.
Support
Did this answer your question?
If not, write to us and say which page you were on.