How to put a picture into the top banner of SharePoint Online

Use the following CSS to add a picture (that repeats) in the center of the top banner. The color red is optional but it helps to draw people’s attention before it gets overwritten. This CSS should go in the alternate CSS file that you can add via the master page settings (i.e. go to site site settings and click on Master Page. Also make sure the publishing features are turned on). Replace <tenant> with the name of your SharePoint tenant and <picture filename> with whatever picture you uploaded to site assets (you can change the directory if you want to put it somewhere else).

 

.o365cs-nav-centerAlign{
background-color:red;
background-image: url(“https://<tenant>.sharepoint.com/siteassets/<picture filename>”);
}
Replace the url with whatever image you want to use.

Make sure the image is 50px high (the height of the banner). It can be whatever length you want. It will repeat across the banner.