.

The background component, whose option icon is shown below, creates an area of content with a background image. 

Choosing an image

Until you choose an image, the background will be black. Right-click anywhere on the option and select Edit background from the context menu, as shown below, to open the background image editor.

The background image editor works similarly to the normal image editor. The original image (or a black square if you have not yet chosen an image) is shown, overlaid with a rectangle with four circular handles in its corners:

To control the part of the image that will be shown (the cropped area), click on one of the handles and and drag it to resize the rectangle. To prevent the aspect ratio (the ratio of width to height) from changing, hold down the shift key when clicking on the handle. To move the cropped area, click anywhere inside the rectangle and drag it.

At the top of the screen is the background image toolbar:

The toolbar contains the following buttons:

Choose image

Clicking this button will open the image manager, described below, to let you choose which image to use.

Colour overlay

Moving the mouse over this button will display a panel letting you add a colour overlay to the image.

Click on the colour swatch (small square of colour) to open a colour picker window to choose a colour from your site’s palette. You can add more colours to the colour picker using the Colours panel.

Drag the slider to control the opacity of the colour overlay. A lower opacity (more transparency) will allow more of the image to show through, while a higher opacity (less transparency) will show more of the colour overlay.

Focus

Clicking this button will let you set a focus point for the image. Crosshairs (the same symbol shown on the toolbar icon) will be shown on the image, and you can drag it around to move the focus point.

The aspect ratio of the background (its width compared to its height) depends on the amount of content on top of it, which means the background image will usually be cropped further, with either part of its top and bottom sides or its left and right sides not visible. If you don't set a focus point, the image will be cropped equally on both sides, keeping its centre in the centre of the background. If you set a focus point, the image will be cropped towards the focus point. For example, if you set a focus point a quarter of the way in from the edge of the image, this point will be kept a quarter of the way in from the edge of the background.

Attachment (only available for full-width backgrounds)
Moving the mouse over this button will display a panel letting you choose how the image moves as the page is scrolled.

Scroll makes the image move with the page. Parallax makes the image move at a slower speed than the page. Fixed makes the image stay in a fixed position as the page scrolls past.

Note that while editing the page, parallax backgrounds will show as fixed. Mobile devices do not support parallax and fixed backgrounds, so on mobile devices the background will move with the page.

Undo (F2 or Control Z)

Clicking this button will undo the last change to the image.

Redo (F3 or Control Y)

Clicking this button will redo the last change to the image.

OK

Clicking this button will leave image-editing mode, keeping any changes.

Cancel

Clicking this button will leave image-editing mode, discarding any changes.

Managing images

Clicking on the Choose image button on the toolbar will open the image manager, as shown below. The image manager lets you upload, rename, and delete your images, and organise them into folders.

At the top of the image manager is a breadcrumb trail, showing you where you are and letting you navigate more easily. The image manager will start in the folder containing the current image, or the All Images folder if you have not yet chosen an image. If you move into a folder inside the All Images folder, its name will be added on to the end of the breadcrumb trail. You can then click on the All Images breadcrumb to move back to that folder.

To upload images into the current folder click Upload images…. You can then select one or more images to upload — hold down the Control key (or Command key on an Apple Mac) to select multiple images.

Below the breadcrumb trail and upload button is a list of the contents of the current folder.

To create a new folder inside the current folder, click the icon labelled Create folder. Enter a folder name, which may consist of letters, numbers, spaces, underscores, hyphens, and periods, and then click Create. Once the folder is created the image manager will move into it.

Folders are indicated with a folder icon, as shown for the About us page, Contact us page, and Home page folders in the example above. To view the contents of a folder, click on its icon. Click on a folder’s name to rename it or delete it. You can only delete a folder if it is empty — this prevents you from accidentally deleting a large number of images in one go.

Images are indicated by a small thumbnail image in a frame, as shown for three images in the example above. To choose an image, click on its thumbnail; the image manager will then close. Click on a image’s name to view its details and rename it or delete it. Before deleting an image, you should remove any image components using it from your site.

Below the list of contents is a usage indicator showing how much of your allowed space for images you have used.

Please note: you will not be able to change the background colour of your website using this component. If you wish to do this, please contact us here.