Background images

Background images are positioned directly below the header, centrally aligned to the page. Images are always 1920px by 460px. Athough banner background images are always positioned in the same way, you can adjust how much of the image is shown by adjusting the Content Positioning setting, which determines how far below the header the main content area is poistioned. You can choose:

Top

The content area is positioned directly below the header, meaning that any header background image will only be visible either side of the content area. An example of this is the dotted pattern on the Faculty of Theology website:

Middle

The content area is positioned 220px below the header, giving you a letterbox view of the background image and allowing part of the image to extend below the content area, giving the impression of the content 'popping up' into the image. The CONPEACE website has a background image with content position set to 'middle':

Bottom

The content area is positioned 460px below the header, meaning that the full height of the background image shows above the content area.

Custom

You can provide your own custom value for the space between the header and the content area. There is no limit to the value you can enter here, though it is advisable not to exceed 500px. The Oxford Mosaic website has custom height of 280px:

Responsiveness

Background images in viewport sizes between 993px and 1728px wide

In viewport widths between 993px and 1728px wide (i.e. the maximum width of the content area), which includes laptop screens and small desktop devices, the page background (appearing on either side of the content area) is not visible. As a result, the content positioning will appear to only change the distance between the header and the top of the content area.

Background images in viewport sizes smaller than 993px wide

Background images are not displayed on tablets and mobiles (below 993px screen widths). The content position is also ignored under these conditions.

Configuration

Background images can be specified on a path basis (e.g. for all pages under news/*) or on a page by page basis. The postion of background images is a site-wide setting. Read the Mosaic Background Images documentation for more information.