> For the complete documentation index, see [llms.txt](https://help.parta.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.parta.io/branding/create-branding/theme/section-background.md).

# 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 %}