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

Use Text Over Media to add a section of large-sized text.  This section type is often used to create chapter headings, as well as deliver pull quotes, highlight key data, and even to include full-screen images or looping video without text.   

Up to three text fields appear within the section, and they can be overlaid above a full-screen image or video, site beside or above the media in half of the screen, or sit alone without accompanying media.

The text fields can be moved, as a group, 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 centre 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 Internet Explorer).

Media guidelines:

  • 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. You can use the focus point to adjust the crop, or 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, and 
  • Shorthand will automatically compress JPG images for multiple device sizes.
  • You may choose to either upload a single video that will be cropped to fill both wide and tall screens, or upload videos specific to each format so that, for instance, your readers on a portrait-orientation phone are shown a different video to that shown to a reader on a laptop or desktop (landscape) screen,
  • Landscape format - will fill wide screens: 1920px X 1080px (1280 x 720px can also be used), 
  • Portrait format (optional) - will fill tall screens such as phones in portrait orientation: 1080px X 1920px
  • MP4, 
  • 100mb MAX (much smaller if possible) – we recommend a max of 2MB per 5 secs, 
  • Muted - (we recommend removing sound in editing to reduce filesize), and 
  • Fallback image (same aspect ratio as your uploaded video).  These images are shown before the video loads.

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 or video and overlaying text react to the page scrolling.

Text Over Media options include a Full screen and a Half screen layout. In a full screen layout, the text appears overlaid on an image, whereas the half screen option dedicates one half of the screen to the image, and one half to the text. As well as for stylistic purposes, this may be a preferred option when all other placements of text are likely to obscure important parts of the image.

The half screen options also enable you to specify which half of the screen contains the image and which half is for text.  For landscape devices, the image can be placed to the left or right of the screen. On portrait devices, you may choose to have the image at the top or bottom half.

When changing from a full screen to half screen layout, you may find that you need to adjust the focus point of your image to ensure that it sits well within the half-screen area.

The Overlay section option enables changing the visibility, opacity and style of a layer that sits between the background image and text.  The overlay can help text to appear clearer when it may otherwise blend in to the background colour.

The Background position section option changes the way the section responds to the sections that surround it : either scrolling up the page in the same way that text sections do, or appearing in a 'fixed' position as the rest of the page seems to scroll over the top of it. Here's the "SCROLLS" option:

...and the "FIXED" option:

For more general information about section options, see: Section Options.