The Designer lets us add header images to individual pages. Applying images using this approach has some benefits compared to adding them as traditional images using the page editor.

If you want the quick solution, then scroll to the bottom where you will find a video demonstrating how header images are used.

To apply a header image to a page, first make sure you are logged in and upload the image file. Then browse to the page where you want to add a header image, and open the Designer using Content > Design.

Now click in the content area (marked with a red outline in the image below), and open/expand the Header image section. All there is to it, is to select the image you uploaded from the first drop down menu. You can now optionally have it stretch across the page, and change the height of the image.

It is recommended to have the Position option set to Behind content which makes better sense in most cases.

If you do not want the text on the page to be on top of the image, then set Indent content from top to the same value as specified in Height, or higher if you want to add some spacing between the header image and the content below it.

If you do want to place text on top of the header image, you will need to make a minor change to the content page, to make sure the text on top of the header image remains within the boundaries of the image. This is especially important to make header images work properly on mobile devices with smaller screens.

We have now created a fixed container that will never change size, no matter how the text inside it wraps on different screen sizes, or if the font size is changed when certain resolution breakpoints are met. The images and video below demonstrates the steps necessary.