Background images

A background image is the image attached to the back of a container (such as a Page, Section, or Column). Background images add visual interest to your page with different display options and effects. 

Page background image

Add a page background image

1. Click on the Left Side Bar.
2. Click on "Settings". This will open the Page Settings.
3. Under the General Settings tab, toggle Set page background. 
4. Choose Image from the Type dropdown. 
5. Click Upload Image to select an image and set it as a page background.
6. Click “Save” to save your page.

Page background image position

The position of a Page background image can be adjusted to focus in on a specific area of the image. 

1. Click on the Left Side Bar.
2. Click on "Settings". This will open the Page Settings.
3. Under the General Settings tab, scroll to the Set page background control. 
4. Within the Position control select either: Top, Center, Bottom, Top Left, Top Right, Center Left, Center Right, Bottom Left, Bottom Right. 
5. Click “Save” to save your page.

Section background images

Add a Section background image

1. Click "Section" in the upper left corner of the Section.
2. In The Edit Menu click the "Section" tab. 
3. Select Section background.
4. Click background image to set or edit the Section background.
5. Click “Save” to save your page.

Set Section background image display option

Section background images have a number of image display options. 

1. Click "Section" in the upper left corner of the Section.
2. In The Edit Menu click the "Section" tab. 
3. Select Section background.
4. Click display options control and choose a display option.
   • Full width - The Section background image is expanded to fill the full browser width.
   • Shrink to fit - The Section background image is constrained to height of the Section making the full image visible.
   • Image size - The Section background image is displayed at its actual size. You can further adjust the scale of the image or repeat the image on the X and/or Y axis for a tiled effect.
5. Click “Save” to save your page.

Section background image position

The position of a Section background image can be adjusted to focus in on a specific area of the image. 

1. Click "Section" in the upper left corner of the Section.
2. In The Edit Menu click the "Section" tab. 
3. Select Section background and click background image.
4. Scroll to the Position control.
5. Adjust the Left, Centre, Right and Top, Middle, Bottom position of the image to focus on specific area.
6. Click “Save” to save your page.

Section background image color tint 

Section background images can have a color tint applied to allow for content above the image to be more visible. 

1. Click "Section" in the upper left corner of the Section.
2. In The Edit Menu click the "Section" tab. 
3. Select Section background and click background image.
4. Scroll to the Color tint control.
5. Select from a Style preset or choose your own color and/or opacity.
6. Click “Save” to save your page.

Section background image parallax effect

1. Click "Section" in the upper left corner of the Section.
2. Select Background Image from the Editing menu. 
3. Scroll to the Parallax effect control.  
4. Toggle Parallax effect control on.
5. Click "Save" and "View Live" to see the Parallax Effect in action.

Column background images

Add a Column background image

1. Click "Column" in the top left corner of the Section's column to open up the Editing Menu. 
2. Select the "Column" tab in the Editing Menu.
3. Under the Column tab, select Column Background. 
4. Click background image to set or edit the Column background.
5. Click "Save" to save changes to your page.

Set Column background image display option

Column background images have a number of image display options. 

1. Click "Column" in the upper right corner of the Column.
2. In The Edit Menu click the "Column" tab. 
3. Select Column background then select Background image.
4. Click display options control and choose a display option.
   • Full width - The Column background image is expanded to fill the full browser width.
   • Shrink to fit - The Column background image is constrained to height of the Section making the full image visible.
   • Image size - The Column background image is displayed at it's actual size. You can further adjust the scale of the image or repeat the image on the X and/or Y axis for a tiled effect.
5. Click “Save” to save your page.

Column background image position

The position of a Column background image can be adjusted to focus in on a specific area of the image. 

1. Click "Column" in the upper right corner of the Column.
2. In The Edit Menu click the "Column" tab. 
3. Select Column background then select Background image.
4. Scroll to the Position control.
5. Adjust the Left, Centre, Right and Top, Middle, Bottom position of the image to focus on specific area.
6. Click “Save” to save your page.

Column background image color tint 

Column background images can have a color tint applied to allow for content above the image to be more visible. 

1. Click "Column" in the upper right corner of the Column.
2. In The Edit Menu click the "Column" tab. 
3. Select Column background then select Background image.
4. Scroll to the Color tint control.
5. Select from a Style preset or choose your own color and/or opacity.
6. Click “Save” to save your page.

Column background image parallax effect

1. Click "Column" in the upper right corner of the Column.
2. In The Edit Menu click the "Column" tab.
3. Select Column background then select Background image.
4. Scroll to the Parallax effect control.  
5. Toggle Parallax effect control on.
6. Click "Save" and "View Live" to see the Parallax Effect in action.

Background images

Set image display options

Images within your Columns can be set to different display options.

1. Select an image.
2. Go to the “Image” tab in the Editing Menu.
3. Click display options control and choose a display option.
   • Standard - The image is a foreground image. Best for SEO and accessibility.
   • Expand to fit - The image becomes a background image and will expand to fit the size of the image container. Allows for Position and Parallax effect control. 
   • Shrink to fit - The image becomes a background image and will shrink to fit the full image within the size of the image container. Allows for Position and Parallax effect control.
4. Click “Save” to save your page.