Add a banner to your SharePoint site - using CSS and SharePoint Designer

I already explained the easy way to add a banner to your SharePoint site. However, there's another way for adding a banner by using some CSS code and some help from SharePoint Designer.

1. Create a wide banner. If the banner is too short it will repeat. You can make it 2000 px x 110 px approximately. Rename the file as "banner.jpg".

2.  Create a text file, (.txt) name it "NewCSS.txt" and add the following code. You will replace the URL with your banner's.


.s4-title {
background:#F9F9F9 url('Banner URL') repeat-x 0px 0px;
margin:0;
min-height:121px;
overflow-x:hidden;
padding:30px 0 0 310px;
word-wrap:break-word;
}

3. After you save the text file, change the format to ".css".

4. Create a document library to save the CSS file. You can name it however you want. For this example, I will call it "CustomLibrary".

5. Upload the CSS file the the "CustomLibrary"

6. Go to the Master Page. (Site Actions -> Site Settings -> Master Pages)

              

               

              

7. Add the following line of code in line 36, where you will place the 

<link rel="stylesheet" href="/CustomLibrary/NewCSS.css" type="text/css" media="screen" />

8. Reload your SharePoint site and you will have your banner on.