TIP: Add a Header Image to your Atlas Home workspace for enhanced design & intrigue

It is welcome news that Microsoft has introduced the capability to insert full width banner images as part of a site's Navigation. Although this is a SharePoint function, this plays into the Atlas branding capabilities very well as it enables the ability to extend the branding from your Atlas main menu!

As this is a Microsoft feature so it should be available on any Modern workspace regardless of your Atlas version.

In this article:

• Header Image Examples
• Sizing
• How to turn on the Extended header and add an image
  
  

Header Image Examples

Some previous options we have used internally:

You can see how the top of the image is the same colour as our main menu, providing the illusion that they are merged together. This can be used to great effect when used in conjunction with your main menu and branding colours.

However you can swap these over very easily and can pull attention to anything which may be going on internally. We have used one to celebrate Christmas;

One to celebrate our companies 21st anniversary;

Even one to welcome in Winter;

But you will be able to get creative and create additional images for whatever is going on that month/week/day.

Sizing

We have been using the default size of 3750 x 144 pixels

However in the below image, it is 3750 x 450 pixels so provides more space for the design, but SharePoint will still trim and crop this down to the maximum size allowed, so you can adjust the 'focal point' (instructions below).

How to turn on the Extended header and add an image

Before getting started, you want to think about the header image you would want to use. I have kept things simple for these instructions by just using colour blocks, but we recommend you design a specific image for your workspace before proceeding - or after testing with existing imagery.

1. Navigate to the workspace (note you will need to be an Owner within the Site Permissions)
2. Click the settings cogwheel in the top right, then click on Change the look:
   
3. Click on Header, then change the Header Layout to Extended:
   
4. Scroll down below the layouts and under the Image heading click Upload. You do not get this option with any of the other 3x Header Layout options (shown above)
   
5. Choose the image you want to upload, then you will see it added to the header. At this point, you will notice that the image is stretched across the entire header and behind the text, so you may want to make adjustments or change colours to ensure that text is readable.
   
   Here I have used a single colour, even though it looks bad, to highlight the effect this can have on the heading. This is shown immediately after you upload the image:
   
   So if we wanted to improve this we should either:
   • Change the Theme to the accent colour theme which should change the text to white:
     
   • OR use a lighter colour which allows the text to be read easily:
     
   • Look back at the top of this article to see an example created by our designer.
     
     
6. In the right hand panel, you can set the focal point for the image if your image is large enough for it to have an effect. To do this move the yellow circle around the image:
   
7. As mentioned already, this is not particularly visually appealing using just a colour block - we would of course recommend a bespoke image with preferably a white or light coloured background so that it is not overly distracting.