> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/triumph/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/triumph/template/shared-settings/section-background.md).

# Section background

Use the '**Background**' setting to customize or remove the section background:

* **None** – No background applied.
* **Color** – Set a solid background color. Use the '**Color**'.
* **Gradient** – Apply a gradient background. Use the '**Gradient**'.
* **Image** – Use an image as the background. Settings available when the option is selected:

**Image on desktop**\
Select the main background image (used on all devices by default).

**Image on mobile**\
Optionally upload a different image for mobile devices.

{% hint style="warning" icon="alarm-exclamation" %}
**Note!** The *Image fit* settings work with the [*<mark style="color:$primary;">Width</mark>*](/triumph/template/shared-settings/section-layout.md) parameters.
{% endhint %}

**Image fit**\
Choose how the image fits:

* **Full background**
  * Scales the image to fill the whole container.
  * The image may be cropped to maintain its aspect ratio.
  * Behaves like a background image (`cover`).
  * Equivalent to `background-size: cover`

**Image position** *(Full background only)*\
Align an image: Top, Center, Bottom.

* **Contain**
  * Scales the image to fit entirely within the container.
  * Preserves the original aspect ratio.
  * May leave a space around the image.
  * Equivalent to `background-size: contain`

**Image overlay opacity**\
Adjust the transparency of a color overlay (0–100%).

**Image overlay color**\
Choose the color displayed over the image.

Use the '**Parallax effect**' to add motion when scrolling:

* **None** – No effect
* **Scroll** – Background moves at a different speed than the page.
* **Zoom** – Image zooms in or out when scrolling.

In the '**Width**', choose how wide the background appears:

* **Full width** – Extends across the entire screen.
* **Content width** – Matches the width of the content.