Background Control #

The Background Control in ABC is a versatile feature that allows users to customize the background of their blocks with various styles and effects. With options for both classic and gradient backgrounds, you can create the perfect ambiance for any block.

Background Options #

Background Type: Choose between a solid color fill, a gradient, or an image to create the desired backdrop for your blocks.

Background Color: Use the color picker to select a hue that complements your block’s content and aligns with your brand identity.

Background Image: Upload an image to serve as the block background. Tailor it further with the following settings:

• Background Position: Position your image with precision by choosing from preset locations or using percentage values for custom placement.
• Background Repeat: Decide whether your background image repeats and in which direction — horizontally, vertically, or not at all.
• Background Size: Choose how the image should fit within the block, with options to cover, contain, or set specific dimensions.

Parallax Effect: One of the standout features for background images is the parallax effect. When enabled, it creates a sense of depth as the background image moves at a different speed than the scrolling content, adding a dynamic, engaging layer to your pages.

Gradient Options #

Gradient Type: Pick between a linear or radial gradient and customize the transition of colors across your block.

Angle and Color Stops: Define the gradient direction with the angle option and choose your colors to create a smooth and visually appealing transition.

Filters #

Enhance your background further with filter options. Adjust the hue, saturation, brightness, and more to achieve the perfect visual effect. Filters apply to both solid colors and images, providing a high level of customization for your backgrounds.

• Hue Rotate: Shift the color spectrum of your background.
• Invert: Flip the colors for a strikingly different look.
• Blur: Soften the background for a subtle effect.
• Saturate: Intensify the colors for vibrancy.
• Sepia: Apply a warm, sepia filter for a vintage feel.
• Brightness: Adjust the lightness or darkness of the background.
• Contrast: Enhance or reduce the difference between light and dark areas.
• Grayscale: Give your background a classic grayscale effect.

Hover Effects #

In addition to static settings, all background options include settings for hover states. Define a different background color, gradient, or image that reveals itself when a user hovers over the block, which adds an interactive dimension to your site’s design.