# Background

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FLz8pN6PVgKVybNPjqdoW%2Fs_l_bg.png?alt=media&#x26;token=14b625bd-d6fb-4b17-953f-a5beb1057c57" alt=""><figcaption></figcaption></figure>

This layout setting helps to visually separate content areas, emphasize key sections, and maintain consistent design across devices.

**Location:** `Sections -> Templates -> Layout → Background`

***

## Layout: Background – Options Overview

| **Option**                 | **Description**                                                                                                                                                                                                                                                                                          |
| -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Width**                  | Defines how wide the section layout should appear on the page. Options include: **Default** – Uses the theme’s standard content width. **Boxed** – Restricts content within a narrower, centered layout. **Wide** – Expands the section to fill larger screen widths (recommended for 1440px and above). |
| **Desktop top padding**    | Adjusts the space **above** the content when viewed on desktop. Use the slider or enter a custom percentage to increase or reduce spacing.                                                                                                                                                               |
| **Desktop bottom padding** | Adjusts the space **below** the content on desktop devices. Useful for separating sections vertically.                                                                                                                                                                                                   |
| **Tablet top padding**     | Controls the space above the section content specifically for **tablet** viewports.                                                                                                                                                                                                                      |
| **Tablet bottom padding**  | Controls the space below the section content for **tablet** viewports.                                                                                                                                                                                                                                   |
| **Mobile top padding**     | Defines the vertical spacing above the section content on **mobile** devices. Helps maintain visual balance on smaller screens.                                                                                                                                                                          |
| **Mobile bottom padding**  | Defines the space below the section content on **mobile** viewports. Ensures proper breathing room on mobile layouts.                                                                                                                                                                                    |
| **Background**             | Determines what type of background is applied to the section. Options: • **Hide** – No background. • **Color** – Use a solid background color. • **Gradient** – Apply a color gradient. • **Image** – Use a custom image as background.                                                                  |
| **Color**                  | Visible only when **Background = Color**. Lets you choose or enter a color value for the section background.                                                                                                                                                                                             |
| **Width (Background)**     | Controls how wide the background element extends: • **Fullwidth** – Background spans the entire browser width. • **Content width** – Background is limited to the content container.                                                                                                                     |
