Customizing Modern Page Header Background – Part one

Customizing the header in SharePoint Online modern page is every developer’s dream in SharePoint world. And Microsoft didn’t enable the full flexibility on customizing the header in modern pages. But they still provided some options to modifying the headers and I am here with a series of posts on exploring those options on both OOTB and with the programming.

The above image is an Office 365 suite bar and header from SharePoint Online site and this will be visible on the topmost in SharePoint modern pages.

Page Header contains the Site Logo, Site Title, Navigation, Sharing Options and Site members information. And when you are creating a site with the default template, the background of the header will be transparent.

To change the color and background of the header is possible by changing the look and feel via theming options. For now, in OOTB we will have four background options for header in modern page. We can applied this setting in a web object: ( Web.HeaderEmphasis )

• None
• Neutral
• Soft
• Strong

None is the default header background setting, which applies the transparent background to the page header. Selected Theme’s background color or image applies to the page header.

Neutral is the grey color background for the light themes and for the dark themes, it may vary depends on the theme main color.

Soft applies the light color background to the header based on the selected Theme’s main color.

Strong applies the selected theme’s main color as the background color for the header in modern pages.

By OOTB, headers background can be applied based on the Theme selection and Header Emphasis property in a web object.

Applying the simple background is enabled using OOTB and in my next article, we will go through the steps for applying the gradient background to the header. So, stay tune. Cheers!