Large text placed over a full-screen image or video. 


Use the Text Over Media section to add a full-screen background image or video, with up to three overlaid text fields and the option of an image caption.

The title text fields can be moved to one of nine positions using the arrow icons.  Text within each of the fields can be resized using options that are shown to the left of the field on mouseover.  Similarly, options for aligning the text left, right or center within the field are available with an alignment button shown to the right of the field.  

Video added to the background will be autoplayed, looped and muted. Autoplay video is not supported on all platforms, so a Fallback image is also required and will show instead on those devices (e.g. mobile browsers and old versions of IE).

This section type is often used to create chapter headings, as well as deliver pull quotes, highlight key data and often standalone media.

Media guidelines:

Image:

  • Full-screen landscape image: 2560px x 1440px JPEG at 100% quality
  • Full­-screen portrait image: 1080px x 1920px JPEG at 100% quality
  • Prepare and crop images with a text area in mind. You can toggle a filter from 0-100% to darken your background media in the section and help your text stand out
  • Images will be automatically cropped to the centre on portrait screens. Or you can upload a different image to be shown on portrait screens
  • Use our image templates for safe area guides to ensure no detail is lost in cropping
  • Shorthand will automatically compress JPG images for multiple device sizes.

Video:

  • 1280 x 720px (1920px X 1080px can also be used)
  • MP4
  • 100mb MAX (much smaller if possible) – we recommend a max of 2MB per 5 seconds
  • Muted - remove sound in editing to reduce file size
  • Fallback image (same aspect ratio) - you can also upload an alternative for portrait screens rather than having a default central crop.

Section Options

Text Over Media sections support a number of section options including, if your theme allows for it, changes to the text colour, colour and opacity of an image overlay, change to the section height, and changes to how the background image and overlaying text react to the page scrolling.

For more, see: Section Options.