Background images

In order for an image to be used as a background image, it must be uploaded using the 'Upload a new Background Image' function.

On pressing 'Upload a new Background Image' the Create Background Image screen will load.

To create a new background image:

1. Insert an image name
2. Click browse to search for an image file from the media library (3), or upload a new image (4) - images uploaded via this method must be sized to 1920px by 460px. Uploading a background image directly from the Web is not recommended. Instead, images souced on the Web should be downloaded, modified as necessary (e.g. resized to 1920px by 460px), and uploaded to the site.

When the image is uploaded, Save the settings. 

Background images are applied to pages by specifying the intended page by its path (URL alias) and selecting the background image from the drop-down list of background images.

Only one background image will be applied to each page. Background images can be applied to individual pages, to a group of pages on a website, or globally (to all pages on the website).

To apply a background image to an individual page:

• Input the page's alias into the 'Path' field and select the desired background image from the drop-down list

To apply a background image to a group of pages on a website:

• Ensure all pages that are intended to have the same background image have a URL alias structure comprising more than one part, where the ending part is unique to each page. E.g.: The same background image should be applied to three pages, entitled:
  Red Page, Green Page, and Blue Page. These pages should be given URL aliases such as example/red-page, example/green-page, example/blue-page
• To apply the same background image to each page, input the first part of the URL alias followed by the wildcard symbol (*) in place of the unique URL parts. E.g. example/*
• Then select the background image from the drop-down list and Save

To apply a background image to all pages on a website:

• Input the wildcard symbol (*) into the path field and select the background image from the drop-down list.

Items appearing at the top of the Manage Background Images list will take precedence over items lower in the list. So a background image set to the path 'people' at the top of the list would be applied before an image set to '*' at the bottom of the list.

Content on Mosaic pages is contained within a content area, which has a maximum width of 1728px (see screenshot below). Background images are part of the page background and are positioned behind the content area.

Depending on whether the Header/Footer width is set to the full width of the browser window (Header/Footer width option 1) or the width of the content area (Header/Footer width option 2), the background image will occupy the full width of the browser window (option 1) or be limited to the width of the content area (option 2).

The position of the content, relative to the background image, can be set using the Content Positioning controls (3).

In the screenshot below, the content position has been set to 'Middle' (i.e. the top of the content area is positioned at the mid-point of the background image's height).

Output on a Mosaic site: Content area highlighted

The examples below illustrate how the content positioning controls affect the appearance of the rendered page.

Position: Top

Output on a Mosaic site: Content position set to 'Top'

Position: Middle

Output on a Mosaic site: Content position set to 'Middle'

Position: Bottom

Output on a Mosaic site: Content position set to 'Bottom'

Position: Custom (e.g. 356px)

Output on a Mosaic site: Content position set to 'Custom: 356px'

Background images on screen resolutions of less than 1728px wide

On screens with resolutions of less than 1728px wide (the maximum width of the content area), the page background (appearing on either side of the content area) is not visible. As a result, the content positioning will only appear to change the distance between the header and the top of the content area.

Custom setting viewed on screen resolutions < 1728px wide:

Output on a Mosaic site: Content positioned on a narrow (