Contentbox Backgrounds

If your Section already has a Background Image

Click the BACKGROUND button at the bottom of the section.

If adding a Background Image

Click the section settings cog icons, either at the top-left or the bottom right to bring up the Contentbox settings popup window.

Launch the settings modal as per the above instructions then click the blue camera icon under BACKGROUND IMAGE to launch the image wizard.

Click the section settings cog icons, either at the top-left or the bottom right to bring up the Contentbox settings popup window.

Launch the settings modal as per the above instructions then click BACKGROUND COLOUR field to launch a colour picker, or paste in a colour value.

Positioning Background Images in Contentbox

When adding an image to a Contentbox section, by default the editor scales the image to fit the available height and width and centers the image within the available viewable area.

This can sometimes cause issues with the photo positioning, in that a head might be cropped off, or a required element not being visible. Given that browsers windows can be different shapes and sizes changing the background position might not fix all scenarios but might still be a useful tool.

Above - the example of a tall image positioned in a Contentbox section. There is a lot of tall space above the image.

One approach is to go in and crop the original image in the Files > Photo Manager area. though this will permanently change the image dimensions and cannot be reverted.

In the screenshot below you can see that the image is position a bit low in the window when centered.

To change the background position, click the Contentbox Settings icon, either top-left, or bottom right of the section.

With the Section settings popup showing, choose the BACKGROUND SIZE / POSITION section and then  the BACKGROUND POS setting.

Changing the background pos to CENTER BOTTOM (Down Arrow), retains the horizontal centering but vertically locks the image to the bottom of the sections rather than the center.

When viewed on the site the background is now locked to the bottom on the site.

1. Click the dark blue cog icon top-left of the section to bring up the Contentbox settings popup.
2. From the Contentbox settings window that pops up, select BACKGROUND OPTIONS & OVERLAY.
3. From the options that show, click the OVERLAY colour field to open the colour picker, or paste in a colour value.
4. Set the opacity as needed via the Overlay Opacity dropdown
5. Click out of the window to close, then save your changes.

To use a Background Blend mode will require Background Colour other than white to be set on the section.

1. Click the dark blue cog icon top-left of the section to bring up the Contentbox settings popup.
2. From the Contentbox settings window that pops up, select BACKGROUND OPTIONS & OVERLAY.
3. From the options that show, click the BACKGROUND BLEND MODE and select a blend option.
4. Set the opacity as needed via the Overlay Opacity dropdown
5. Click out of the window to close, then save your changes.

By defaut Background Images will attempt to Cover the available space but it is possible to set the image to be Contained within the available area.

Background Size - Cover

Background Size - Contain