Add Background Header To SharePoint Online Site

In this post, I am going to show you how to add header image as background to SharePoint online site, this will be very simple all we need is a image, and CSS class.

The beauty of the approach what we follow now is… we neither touch existing master page nor existing CSS

We will implement this by using an  alternate CSS approach So, let’s work out

I have two files, an image named as header.png and a custom CSS named as style.css this custom CSS has a single class referring the image as background.

Header image

Header image

Style.css

[sourcecode language=”css”]
#s4-titlerow
{
height: 176px;
background-image:url(‘/sites/Demo/Style%20Library/images/header.png’);
}
[/sourcecode]

Let’s upload the header.png under style library > images folder

Upload header image to style library > images folder

Upload header image to style library > images folder

Then after, upload the style.css file to style library > style folder (if you don’t see style by default, create one)

Upload style.css file to style library > style folder

Upload style.css file to style library > style folder

Now, the final step is to set the alternate css, grab the uploaded style.css link, the link will be like https://<your-sharepoint-online-domain>/sites/Demo/Style Library/style/style.css
Once you have the link, got to site gear > Site settings, under look and feel section, click on Master page
scroll down to the bottom of the page, expand Alternate CSS, the select the radio button to Specify a CSS file to be used by this site and all sites that inherit from it: provide the style.css location, then click OK
Updated Alternate CSS URL

Updated Alternate CSS URL

After you complete the all the steps, you will be able to see the header as below 🙂
SharePoint online custom header

SharePoint online custom header