Background
Create fixed or angled backgrounds
Overview
The Background component lets you easily add color, gradients, or images behind your content, helping you create visually rich and layered designs. Whether you’re highlighting a section, creating contrast, or simply enhancing the overall look of your page, the Background component gives you full control over the style and appearance.

You can choose a simple color, apply a background image, or even create angled backgrounds for dynamic effects. Fine-tune the opacity, fixed positioning, and layering options to craft exactly the look you want.
How to Use the Background Component
You’ll find the Background component under the Layout section in the Components list. It includes a single drop zone where you can add the content you want to sit above the background — like text, images, or other components.
You can choose a solid color, add an image, or enable angled backgrounds for more dynamic designs. If needed, you can also fix the background in place for a parallax scrolling effect. Adjust the color, opacity, and style settings to match your site’s design perfectly.
When to Use Background Instead of Container
While you can use a Container to group and layout content with padding, width control, and background color, the Background component is designed specifically for more advanced visual effects.
Unlike a Container, the Background component gives you the ability to add fixed background images (for a parallax-style scrolling effect) and angled edges to create dynamic section transitions. If you need a background that moves independently from your content or you want to add stylish slanted dividers, the Background component is the better choice.
Use a Container when you need flexibility for simple layouts, but choose a Background when you want to add extra visual flair to your designs.
Last updated
Was this helpful?