# Background

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.

{% embed url="<https://youtu.be/YlKQaLTm1hY>" %}

You can choose a simple colour, 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.

{% hint style="info" %}
If you want to add structure and layout control, use a Container. If you want angled edges, or fixed images use the Background component.
{% endhint %}

### 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 colour, 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.

<figure><img src="https://3876014504-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNy6AECEVH2p4eFDicpM1%2Fuploads%2FMk806gs2Xz8MjUZNjyKU%2FCleanShot%202025-04-28%20at%204%E2%80%AF.23.29%402x.png?alt=media&#x26;token=9afd9dec-d22c-418b-88f1-3efc731343e5" alt=""><figcaption><p>The Background Component can be found under Layout in the component list.</p></figcaption></figure>

### When to Use Background Instead of Container

While you can use a Container to group and layout content with padding, width control, and background colour, 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.