SharePoint 2013 - Replace Master Page Header Color with Image

Question

I would like to replace the Master Page header background color with a banner/image. Can this be done? Do I make the change on the master page or in css?

Answer 1

We can use the CSS style below to achieve it, add the CSS style into tag in master page.

<style type="text/css">
#suiteBarLeft{
    background-image:url('https://blog.fastaccounts.pk/wp-content/themes/fastaccounts/images/blog-banner-01.jpg');
    background-color:white !important;
}
</style>

Answer 2

Below script needs to be pasted inside the masterpage. Paste this above </body> tag in your masterpage.Refer here.

<script type="text/javascript">
     var suitebar = $("#suiteBar");
     var branding = suitebar.find(".ms-core-brandingText");
     branding.html("<a href='/'><img src='/SiteAssets/yourimage.PNG' height='30px'></a>");
</script>