For some pages, you want to add a large image to the header section (see example below).
Image size
The following dimensions are required for the hero image.
1600px wide x 600px high (keep this dimension in proportion).
Image must be at least 72dpi.
Guidelines for selecting a hero image
- Avoid images that are complex
- If using an image with people, make sure they are positioned to the right side of the image (Otherwise they will be hidden by the page title)
- Do not have text in the image (this fails accessibility)
How to add a hero image
1. In the Customised Header tab, click Full-width background image.
2. Click Select images
3. Browse and select your image from the Library tab if uploading an existing image.
4. If you're uploading an image for the first time, click on Add image, then Choose file and browse your computer for your image.
5. Complete the Name field. Make the name of the file meaningful to the image, so it can be easily found using Media search. For example, a photo of a teenage girl laughing should be titled 'Teenage-girl-laughing'. If it’s a photo of a well-known person, you should include their name and position in the title (e.g. Joan-Kirner-former-Premier-of-Victoria).
6. You can define a focal point for your image so the image so the image will be cropped to the required proportions/dimensions for each device based on the focal point. Only 1 focal point can be added to an image.
Set the focal point
To set the focal point, select the point using your mouse by clicking the image.
7. Complete the Alternative text field for your image. This is a description of the image for users who can’t see the image; it’s an important accessibility requirement. If the image is simply decorative, add two double quotes in the alt text field; this tells the screen reader to skip it.
8. Click Save image.
Set the theme (light or dark)
Once you have added a hero image, you can select a Light or Dark theme. This will apply a style to the heading and sub heading text in your banner.
The Light theme is best suited to images that feature light colours. This theme places text directly on top of the image featuring blue heading text and black sub heading text.
The Dark theme is best suited to images that feature dark colours. This theme places heading text on a blue background with white sub heading text (see example above).
To select a theme:
1. In the Page Header tab, use the drop down box under the heading Theme to select Light or Dark.
Now you're ready to Save and preview your campaign page. Use preview to check how the Hero Image looks on the page.
Make sure you adjust your browser size to check how the image responds across different screen sizes.
Reviewed 16 June 2022