# Sections with Custom Background ## 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.** {% hint style="info" %} Explore the **advantages** of Intranet.ai **Sections with Custom Background** by [**clicking here**](https://intranet.ai/features/sections-with-custom-background/) to learn more. {% endhint %} *** ## 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 Sections with Custom Background web part, which is named "IAI - Background Section Editor".

* Click the **Edit** **properties**

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 1. [Settings background color](#settings-background-color) 2. [Settings background image ](#settings-background-image) 3. [Settings background height](#settings-background-height) ### 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.** {% hint style="info" %} * 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. {% endhint %} 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 i**n 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. {% hint style="info" %} * 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. {% endhint %}

* In the first field, **copy-paste the link of the image** you want to use as a background. {% hint style="info" %} **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. {% endhint %} #### 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:**

{% hint style="info" %} 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. {% endhint %} * 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.** {% hint style="info" %} * 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. {% endhint %} * **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). {% hint style="info" %} Remember to choose the right size for your background image: 1900 x 545. {% endhint %}

* Below is a **preview of image height at 300px**.

* Below is a **preview of image height at 2000px.**

{% embed url="" %}