LogoLogo
  • WELCOME
    • Welcome
    • Why Intranet.ai
    • Request a DEMO
    • Use cases
  • SHAREPOINT INTRANET
    • Introduction
    • Plans
    • Hosting options
    • Requirements
    • Installation
      • Installation process
      • Action before the installation meeting
    • Components
      • Advanced Search
      • Alerts and service communications
      • Anniversaries
      • Breadcrumb
      • Bulletin Boards
      • Button with Pop-up Content
      • Comments Area Removal
      • Company Apps
      • Company Documents
      • Company Documents with Folders
      • Company News
      • Content Translation
      • Contributors
      • Departments
      • Disclaimer
      • Discussion and Project Groups
      • Engagement Board
      • Event Calendar
      • FAQs
      • Graphic Buttons
      • Graphic Dividers
      • Highlights
      • Image Slider
      • Instant Form
      • In This Page
      • Intranet Tour
      • Job Posting
      • Key Initiatives
      • Leadership Team
      • Locations Map
      • Mood
      • My Apps
      • My Favorites
      • My Profile
      • News Announcements
      • News Archive
      • Organizational Chart
      • Page Hints
      • Pages Menu
      • People Directory
      • Pop-up
      • Quotes
      • RSS Feed
      • Sections with Custom Background
      • Social Media Posts
      • Videos
      • Welcome Box
    • Other configurations
      • Intranet branding
      • Image dimensions
      • Icons
      • Creation of tag systems for news and documents
      • Teams push notifications
      • Configuration of favorite lists and user lists
      • Viva Connections
      • Creation of dynamic groups in Microsoft Entra ID
    • Releases
      • Version 1.1
      • Version 1.2
      • Version 1.3
      • Version 1.4
      • Version 1.5
      • Version 1.6
      • Version 1.7
      • Version 1.8
      • Version 1.9
      • Version 1.10
  • ACKNOWLEDGEMENT
    • Introduction
    • Hosting options
    • Requirements
    • Installation
      • Installation process
      • Actions after the installation
    • Features
      • Acknowledgement for documents
      • Acknowledgement for pages and news
    • Use cases
    • Releases
      • Version 1.1
      • Version 1.2
      • Version 1.3
      • Version 1.4
  • MICRO LEARNING
    • Introduction
    • Plans
    • Hosting Options
    • Requirements
    • Installation
      • Installation process
      • Actions before the installation meeting
    • Features
      • User roles
      • Navigation bar
      • Course list
      • Course status
      • Steps to create and deliver a course
      • Create a course with AI
      • Create a course from scratch
      • Delete and recover a course
      • Add a new lesson
      • Edit, delete, or move lessons
      • Lesson types
      • Add attachments and embedded content
      • Clone a course
      • Translate a course
      • Generate a final quiz
      • Final Quiz & Gamification Settings
      • Publish and unpublish a course
      • Assign a course
      • Export in SCORM
      • Take a course on SharePoint
  • Integrations
    • Viva Learning
    • Microsoft Teams
    • Microsoft Copilot
  • Use Cases
    • How to turn a Teams meeting into a document
    • How to generate a course from a PowerPoint
    • How to embed a Google Map into a lesson
      • How to insert a document in a course
  • Releases
    • Version 1.1
    • Version 1.2
    • Version 1.3
  • RESOURCE RESERVATION
    • Introduction
    • Requirements
    • Installation
      • Installation process
      • Actions after the installation
    • Features
    • Use Cases
  • Releases
    • Version 1.1
    • Version 1.2
    • Version 1.3
    • Version 1.4
  • TICKETING SYSTEM VIA TEAMS
    • Introduction
    • Hosting options
    • Requirements
    • Installation
      • Installation process
      • Technical set-up
      • Ticketing System Management
    • Features
      • Users’ roles
      • Platform interface
      • Navigation bar
      • Notification system
      • Platform settings
      • Ticket lifecycle
    • Integrations
  • APP MOBILE
    • Introduction
    • Plans
    • Requirements
    • Installation
    • Distribution
    • Features
    • Integrations
    • Releases
      • Version 1.1
      • Version 1.2
Powered by GitBook
On this page
  • What is Sections with Custom Background
  • Add the Sections with Custom Background web part to a SharePoint page
  • Configuration
  • Settings background color
  • Settings background image
  • Settings background height

Was this helpful?

  1. SHAREPOINT INTRANET
  2. Components

Sections with Custom Background

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

PreviousRSS FeedNextSocial Media Posts

Last updated 7 months ago

Was this helpful?

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 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.


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.

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.

  • 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?

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

  • 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.

  • 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.

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

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

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.

Select the Background web part, then click Edit web part on the left side of the Background web part.

Click on the drop icon

Select the Background web part, then click Edit web part on the left side of the Background web part.

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

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.

Select the Background web part, then click Edit web part on the left side of the Background web part.

Settings background color
Settings background image
Settings background height
clicking here
LogoCompany Intranet for SharePoint and Microsoft 365intranet.ai