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

1

Go to the Branding tab.

2

Select a checkbox next to the branding template.

3

Select Edit.

A new window will appear.

4

Open the Section background tab.

5

Set a section background branding.

6

Preview the changes of the loading screen.

7

Click the Save button to apply the changes.

Edit Section Background Branding Settings

Open a section background settings window to start editing.

1

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.

2

Image

Click + or Upload to add an image as a section background.

3

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;

• Horizontal: Repeats the background image horizontally;

• Vertical: Repeats the background image vertically.

4

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.

5

Scaling

Select an image scaling 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.

6

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.

7

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.

Remember to applythe changes via the Save button.