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
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
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
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
After you complete the all the steps, you will be able to see the header as below 🙂
SharePoint online custom header
