Add a Banner to your SharePoint Site

There are several ways to add a banner to the top of your SharePoint site like below.

 

The banner sits in your global breadcrumb so you need to think about your design of your image.

I create my images in Adobe Photoshop and this is the only additional tool used in this how to.

Open up your image editor (Photoshop) and start with a blank canvas that is width of 2200px and height of 100px.

When your SharePoint page loads it will load this image from the left hand side so any images like a logo need to be aligned to the left.  If a computer screen is at 1024 x 800 it will only show the first 1000px.

So add a logo, a bit of text and anything else you want to add.

We need to create our own custom css file, so on your computer create a new text file and rename it to custom.css.  Dont forget to change the file extension as well so its not .txt at the end.

In the file you want to add the css reference which is below

.ms-globalbreadcrumb{
font-size:8pt;
text-align:right;
background-color:#ebf3ff;
padding:2px 10px 2px 5px;

}

This is the same as the default CSS’s used in SharePoint so we need to edit it so an image appears instead of a colour and the padding.

So as a new line we will add

background-image:url(“/_layouts/images/banner.jpg”);

And change the padding to

padding:2px 10px 79px 5px;

Save the file and open your top level SharePoint site.

Create a new document library and hide it from your Quick View Panel.

Upload the banner file and the custom.css file

We now know the URL of the banner and we need to add this to the custom.css file so it can load the correct file.

Right click on the banner image and click on Copy Shortcut.  Open the custom.css file and change the background-image URL to the location of the new banner.

Now right click on the custom.css file and click on Copy Shortcut.

Now go to Site Actions – Site Settings and click on Master Page.

Here you can specify your own css file – scroll down to the bottom of the page and select; Specify a CSS file to be used….and paste the URL of the custom.css file.

If you want to have this css file for all your subsites click on the button below

When you’ve set all these click on OK and you will see your site with a nice new banner