Background Settings

Overlay

Key Point:
Set a color layer that overlays the background elements. This is effective for adjusting text readability over photos or videos.

What this changes:
Evens out brightness variations in the background to make text easier to read.

Adjustment tips:
Start with a solid color and adjust the opacity, then expand to gradients only when needed to avoid visual breakage.

Settings

• Color / Gradient: Set a solid color or gradient to control the background overlay appearance.
• Opacity: Set the overlay opacity to control how much of the background shows through.
• Blend Mode: Select a blend mode to optimize how the overlay interacts with the background and text.
• Reset: Reset this section's settings to their default state.
• Responsive: Enable device-specific settings to prevent display issues.

The Overlay is rendered as the topmost layer of the button background. Since it sits above background images and colors, it is effective for maintaining readability while preserving the image's color tone. Hover state overlay can also be set independently.

Pattern

Key Point:
Set the background pattern type and intensity. Patterns add visual texture while preventing the design from looking flat.

What this changes:
Adds a textured feel that gives the background more visual interest compared to a solid color.

Adjustment tips:
Since the button text is the main focus, keep the pattern contrast subtle for stable results in production.

Settings

• Pattern Type: Select a pattern type to define the background texture.
• Pattern Color: Set the pattern color to adjust contrast against the background.
• Pattern Size: Set the pattern scale to control density.
• Pattern Opacity: Set the pattern opacity to control how prominent the decoration appears.
• Blend Mode: Select a blend mode to optimize how the pattern interacts with the background.
• Responsive: Enable device-specific settings to prevent display issues.

Patterns are rendered using SVG, so they remain crisp on high-resolution displays. Hover state patterns can also be set independently. Since pattern color appearance varies significantly depending on the background color, it is recommended to adjust both simultaneously.

Image

Key Point:
Configure how images and videos are displayed in the background. Fit, position, and repeat settings dramatically affect the result.

What this changes:
The same media asset can produce very different visual impact depending on these settings.

Adjustment tips:
First choose the Fit method, then adjust the position, and finally fine-tune readability with Opacity or Overlay — this order is the most efficient.

Settings

• Media type (Image / Video): Select the type of media to use as the background.
• Image: Image selection, Repeat, Fit Method, Rotation (deg), Opacity: Adjust image background display to optimize cropping and readability.
• Video: Video URL (MP4 / YouTube / Vimeo), Apply: Specify the video source and apply it as a background video.
• Video display: Video Fit, Video Position X, Video Position Y: Adjust how the video fits and where it is positioned.
• Poster: Poster URL, Remove Poster, Poster Fit, Poster Position X/Y: Set a still image to display before the video loads to prevent display issues.
• Responsive: Enable device-specific settings to prevent display issues.

The background layer structure from bottom to top is: Color -> Image -> Pattern -> Overlay. Each layer is managed by z-index (Color: 0, Image: 1, Pattern: 2, Overlay: 3), and all layers have pointer-events: none applied so they do not interfere with click interactions. Hover state image settings can also be toggled independently.

Video background limitations:
On mobile devices (iOS / Android), browser policies only allow video autoplay when muted. This block automatically adds muted, playsinline, loop, and autoplay attributes, but autoplay may still be blocked depending on the device or browser settings. Setting a poster image is strongly recommended. Supported video sources: YouTube (embedded via youtube-nocookie.com privacy-enhanced mode), Vimeo, and direct file URLs (MP4, etc.).

Image/video mutual exclusion:
When "Video" is selected as the media type, the background image layer is hidden via display: none. Images and videos cannot be displayed simultaneously.

Color

Key Point:
Set the base background color. This is the foundation layer of the entire background composition.

What this changes:
The final visual impression is determined by the relationship between overlay, text color, and this base color.

Adjustment tips:
Prioritize a color that maintains text readability when combined with the background, rather than one that looks striking on its own.

Settings

• Color / Gradient: Set a solid color or gradient to control the background appearance.
• Alpha: Set the opacity to control the overlay intensity.
• Gradient toggle: Switch between solid color and gradient to change the background expression.
• Reset: Reset this section's settings to their default state.
• Responsive: Enable device-specific settings to prevent display issues.

Gradients create smooth color transitions that add visual depth. Hover state colors can also be set independently, enabling gradient transitions on hover. As the bottommost background layer, balance its color with the layers above (Overlay, Pattern, and Image).

Hover color transition:
The background color hover transition is internally implemented using a crossfade method (normal and hover states are rendered as separate layers, and opacity is toggled between them). This means transitions work smoothly even when switching between solid color (normal) and gradient (hover) or vice versa.

Transition

Key Point:
Set the transition speed from normal state to hover state. This determines how responsive and satisfying the interaction feels.

What this changes:
Too fast and users may not notice the change; too slow and the interaction feels sluggish.

Adjustment tips:
Start with a Duration of 200-350ms as a baseline, and only add delays or custom easing for elements that need extra emphasis.

Settings

• Duration (ms): Set the transition duration to control how quickly the change occurs.
• Delay (ms): Set a delay before the transition starts to fine-tune animation timing.
• Easing: Set the speed curve to shape the feel of the motion.
• Custom Value: Specify a custom easing value (CSS cubic-bezier format) for precise control over background transition timing.
• Reset: Reset this section's settings to their default state.

This background transition applies to hover state changes for all background elements: Overlay, Pattern, Image, and Color. It operates independently from the Style Settings transition, allowing you to set different speeds for background-only changes.

Differences from Thumbnail and Band:
Background Settings is the bottommost layer covering the entire button, so it does not include settings for size, border, border radius, position, transform (Skew), or individual opacity — those are available in Thumbnail and Band settings. On the other hand, Background Settings includes Pattern, which is not available in Thumbnail. Background Settings also offers the most detailed Poster configuration for video backgrounds.

Related FAQ

• 圖片或影片沒有顯示時的檢查方式 – ZenBlocks buttonBasic
• 手機上影片背景無法播放 – ZenBlocks buttonBasic
• 縮圖與背景的差異與選用 – ZenBlocks buttonBasic
• 文字難讀時的調整順序 – ZenBlocks buttonBasic