Sections with Custom Background

The component for applying completely customized graphics to the sections of SharePoint pages.

What is Sections with Custom Background

Our component boosts SharePoint Online's functionalities, empowering you to enhance your SharePoint intranet's visual attractiveness with a modern design.

SharePoint Online's limitations become evident when you realize they are limited to just 4 background colors for sections. In response to this constraint, our component emerges as a valuable solution, enabling you to freely choose your favorite colors or design custom graphics.

This flexibility allows you to create backgrounds that align with your corporate brand, streamlining user navigation and elevating the overall user experience.

Explore the advantages of Intranet.ai Sections with Custom Background by clicking here to learn more.

Add the Sections with Custom Background web part to a SharePoint page

If your page is not already in edit mode, click Edit at the top right of the page.
Hover your mouse above or below an existing web part and you'll see a line with a circled +, like this:
Click on it and, in the web part search box, enter Background to quickly find and select the IAI-Background web part.

Click the Edit button on the left of the web part to open the property pane and set options such as Settings background color, Settings background image, and Settings background height. See below for more information on each of these options.

Configuration

Settings background color

This section is designed to customize the background color of specific sections of your intranet, to enhance visual appeal and draw attention to key content areas.

To do this, you'll need to select or enter (using hexagonal color codes) the specific color you wish to apply as a background to these sections. This level of customization not only allows you to create a more visually appealing and coherent intranet, but also to guide users more effectively through your content by emphasizing the most important areas.

If you're not in edit mode already, click Edit at the top right of the page.
Select the Background web part, then click Edit web part on the left side of the Background web part.

Click on the drop icon

You can choose a color by rolling your mouse over the color panel, or insert the hexadecimal color code in the fields below.

Below is a preview of a color background chosen in edit mode:

Here's the final result of the preview's color background:

Settings background image

This section allows you to customize your intranet's background image to enhance visual and draw attention to key content areas.

To achieve this, you will need to select or upload the specific image you'd like to use as the background for these sections.

If you're not in edit mode already, click Edit at the top right of the page.
Select the Background web part, then click Edit web part on the left side of the Background web part.

In the first field, copy-paste the link of the image you want to use as a background.

Please note: you need to upload and save the image beforehand in a folder on SharePoint Online in the Site contents of the intranet, where all users have access.

How do I get an image URL from Sharepoint Online?

Open a new page and at the top right of the screen, click on the Settings icon and on Site contents.

Select the folder where you have uploaded your images and you'll access the image library.

Select your image and click on the icon on the top right button, to access information on this image.

Scroll down and copy the image path by clicking on the icon.
Go back to the page with the background web part and insert the path of the image in the required field.

Below is a preview of the background image in edit mode:

In this section, you can also display GIFs in mp4 format. You can create a gif on Canva, save it as mp4, upload it to an image library (on the intranet) and copy-paste its link into the required field.

Finally, you can choose the position of the image focal point (top, center or bottom) of your background, by selecting one of the three options in the drop-down menu.

Settings background height

In this section, you can adjust the height of the intranet’s background, to enhance its visual appeal and emphasize content areas.

To do this, you'll need to specify the background height in pixels. This feature not only improves the aesthetics of your intranet, but it also makes it easier for users to navigate, by emphasizing important sections.

If you're not in edit mode already, click Edit at the top right of the page.
Select the Background web part, then click Edit web part on the left side of the Background web part.

The default setting is 0px. You can expand your image up to 2000px. The more you expand your image, the more it will fill and overflow the other sections (see examples below).

Remember to choose the right size for your background image: 1900 x 545.