The Header, is found at the top of every page in the web site and is the first area of the page a viewer will see.
The Header is made up of three layers overlapping each other:
- The Top Layer containing the Logo and Buttons
- The Middle Layer containing the Gradient Overlay
- The Background Layer containing the Image
Complete Header
Logo and Buttons
These sit with a space of 32px (2 rem) top and bottom.
Background Image
Self-explanatory.
Gradient
A gradient is overlaid upon the background image to improve the readability of the logo.
Responsive Header
The site is built to adapt to the size of the device it is being viewed on.
The Background Image
The header of each main section of the site has a unique background image associated with it. Two .jpg images act as the background image depending on the size of the device used.
Changing the Background Image
Replacing the image with another is possible via the CMS.
It is highly recommended that you use advanced image editing software, such as Photoshop, to prepare the images.
- Log into the site's Admin, which you can find by typing /_admin just after the .co.uk of the web address.
- Once logged in, click the Images Tab of the menu bar.
- On the left is a list of the site's Image Categories. Select Banners.
- In Banners, each of the image records are named after the section where they appear. Choose the one you wish to change by clicking its title or thumbnail.
- Click the Files tab.
- Ensure your images share the same name and dimensions as the ones to be replaced. e.g. banner_about_xxl.jpg (1600x184 pixels)
- Click the Replace icon and upload your image.
Good Practice
- Use a very large photograph as your source image. Small images lose quality when enlarged.
- Prepare a third "Medium" size image to use as the thumbnail.
- Close-up photos with depth-of-field blur left and right tend to work best as they make the logo easy to read.