# 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="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2F8kFreoocxgnpc081Ph7X%2FSection_background.01.png?alt=media&#x26;token=9fe3db39-ab95-4e76-95fb-021581138a0c" 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="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2F6YmPFY2KBwu8Qba6Yb1p%2FSection_background.02.png?alt=media&#x26;token=5bca611b-3d5a-4b18-b5ee-af1754f1d409" 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="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FzwnMFj35rjsbQZpmaD3Z%2FSection_background.03.png?alt=media&#x26;token=8fa4d746-2c1e-4514-83b1-b1e0c8814a57" 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](https://help.parta.io/editor/edit-elements/set-media-and-content-elements/image) 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 %}