How to add a branding banner image across whole page

Question

On SharePoint 2013, I would like a banner image to go across the whole page, replacing the stock logo, and continuing all the way across.

I don't see this anywhere in the settings for the master page. Am I missing it, or do I really need to do custom code? Seems like a basic thing many people would do.

The correct div in the page looks to be id s4-titlerow. I tried messing around with changing the style on that div to:

style="background-image: url('blah.jpg'); height: 76px; width: 510px; background-repeat:  no-repeat;

But no luck. Does anyone have any examples of how to set this in the code? (Or point me to the setting that I am missing).

Answer 1

The style is most probably being overridden by SharePoint on load. Use the !important tag in the CSS. You will need to use custom CSS, therefore you most probably will need to load in via a custom masterpage + css file. To get the whole wdith, don't set to 510px, set to 100%. Also ensure the path to 'blah.jpg' is correct. Your style override was close - it worked for me once I put a legitimate path to an image - but if SharePoint is overriding, the !important will be necessary.

    #s4-titlerow { 
background-image: url('http://scienceblogs.com/lifelines/files/2014/01/13243547332073393725diving-with-great-white-sharks.jpg') !important;
    width: 100% !important;
    background-repeat: no-repeat !important; }