Selecting logos & background imagery for page headers

When configuring headers within the platform, either in the master company theme or in custom guest themes, there are a couple of options available.

You will always want to upload a logo to the page. Then, for the background you can either apply a background colour or upload a custom background image.

This article explains how your options and how to format the imagery.

Logo image formats

File types & file size

The logo sits on top of the background colour or image that you define. The acceptable image formats are JPEG or PNG. Either format is fine, although for block colours PNG may result in a smaller file size (which is good for download speeds). If your logo has any transparency, then you will need to use PNF format.

Image dimensions

We recommend that the image height is in the range 80 to 150 pixels tall. This is just a guide, as logos come in varying widths. For squarer logos, you will want to maximise the height. For wide logos, you may need to have a lower height.

If you already have the logo on a website you may be able to re-use it directly from there. If you don't have the file, you may be able to use a snipping / screenshot tool to create a new file from there. Just be careful if you are doing any resizing that the logo doesn't become pixelated and blurry.

Header configuration options

Setting a header background colour

Setting a block colour is by far the most common option that is used and it is very quick to do. You will need to know the hex colour code for the colour you are setting and this can be entered in the theme manager.

Setting a header background image

If you have a complex background image (for example, a gradient) you can upload an image. We recommend this is minimum 1280 x 200 pixels to cover the whole background, though you may wish to experiment with the sizing on different screen resolutions. If uploading a background image and your logo has some transparent elements, you will need to use PNG format as mentioned above.

If you set a background image, this will override the header background colour, which will not be visible. To revert to using a background colour, you will need to delete any header background image.