# Section background

## What is a Section Background?

A **section background** is the space behind all the content on a section, providing a backdrop for text, images, and other section content.

Fill the entire section with a color or image to create a cohesive and branded experience.

## Set a Section Background Branding

<figure><img src="/files/bA0l9AXOYHPZ4ciMaifP" alt=""><figcaption></figcaption></figure>

{% stepper %}
{% step %}
Go to the **Branding** tab.
{% endstep %}

{% step %}
Select a checkbox next to the branding template.
{% endstep %}

{% step %}
Select **Edit**.

A new window will appear.

<figure><img src="/files/mI2EqdWVGbrmfhazeJUz" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Open the **Section background** tab.
{% endstep %}

{% step %}
[Set a section background branding](#edit-section-background-branding-settings).
{% endstep %}

{% step %}
Preview the changes of the loading screen.
{% endstep %}

{% step %}
Click the **Save** button to apply the changes.
{% endstep %}
{% endstepper %}

## Edit Section Background Branding Settings

[Open a section background settings](#set-a-section-background) window to start editing.

<figure><img src="/files/PYxacw2Tbi5XQ1FqPmDf" alt=""><figcaption></figcaption></figure>

{% stepper %}
{% step %}

### Background color

Change the background color and its intensity by using a hex color code or selecting a shade from the palette or **Branding** color list.
{% endstep %}

{% step %}

### Image

Click **+** or **Upload** to open the [image uploading settings](/editor/edit-elements/set-media-and-content-elements/image.md) window.
{% endstep %}

{% step %}

### Tile

Select a background image tiling option from the drop-down menu:

* **No tile**: Doesn’t repeat the background image;
* **Auto tile**: Repeats the background image horizontally and vertically;&#x20;
* **Horizontal**: Repeats the background image horizontally;
* **Vertical**: Repeats the background image vertically.
  {% endstep %}

{% step %}

### Position

Select a background image position from the drop-down menu:

* **Center**: Positions the image in the middle of the section, both horizontally and vertically;
* **Top**: Aligns the background image to the top edge of the section;
* **Bottom**: Aligns the background image to the bottom edge of the section;
* **Left**: Aligns the background image to the left edge of the section;
* **Right**: Aligns the background image to the right edge of the section.
  {% endstep %}

{% step %}

### Scaling

Select an image scaling option from the drop-down menu:

* **Auto**: Automatically selects the best fit for the display;
* **Fill**: Scales the image to cover the entire area while maintaining the aspect ratio (cropping if necessary);
* **Fit**: Scales the image to be as large as possible without cropping or distortion;
* **Stretch**: Resizes the image to fill the area by distorting its aspect ratio.
  {% endstep %}

{% step %}

### Background positioning

Select a background image scaling from the drop-down menu:

* **Fixed**: Remains an image in a single position on the screen while the rest of the content scrolls around it;
* **Scrollable**: Scrolls an image with the rest of the content, like a normal background, and will move up or down the page as you scroll.
  {% endstep %}

{% step %}

### Overlay

Click **+** to add the overlay color and its intensity by using a hex color code or selecting a shade from the palette or **Branding** color list.
{% endstep %}
{% endstepper %}

{% hint style="warning" %}
Remember to apply the changes via the **Save** button.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.parta.io/branding/create-branding/theme/section-background.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.