By default, section backgrounds display alternating white and grey backgrounds. By enabling ‘Customisation’ (when adding a new section), you can change the background of a section to any colour and invert the text to white (for dark backgrounds) or use an image as a background and adjust the opacity (overlay) settings.
Changing the background colour of a section
To change the colour of the background, click in the ‘Section colour’ box to open up the colour selection tool and select your preferred colour.
The ‘Opacity’ option is disabled for coloured backgrounds. If you prefer a light background, select a lighter shade in the colour selection tool.
The default text colour will be a dark grey which looks best on a lighter background. Alternatively, if you are using a dark coloured background, change the ‘Text’ setting from Default (dark grey) to ‘Inverted’ (white).
Adding an image as the background of a section
To add a background image, click 'Upload an image' (to select your own image file) or click 'Explore stock library' (to select an image from our library).
The ‘Opacity’ option is enabled for section images. For example, the lower the opacity, the more transparent your image will be.
The default text colour will be a dark grey which looks best on lighter background images. For dark coloured backgrounds, change the ‘Text’ setting to ‘Inverted’ (white).
Recommendations
From an instructional design perspective, we recommend that you use section customisation sparingly. Changing the background colour is really effective when you want to make a point or create some impact.
The following tips apply to section customisation:
Test your customisation settings - You might need to adjust the colour, invert text to white or adjust opacity to ensure text remains legible. Be certain to click the ‘Preview’ button to see how your section looks for a learner.
Web Content Accessibility Guidelines (WCAG) impact - Changing the background colour without careful testing may impact text contrast which may negatively impact accessibility.
Be careful with your image sizing - If using an image as a background, don't use a 5MB image as that’s a lot to load onto the page. Don't use an image on a really long section as it will stretch. Smaller sized images used in a short section (with a good overlay) work the best.
Examples
Section image with text element. 40% opacity with ‘Default’ text.
Section colour with quote element (layout - narrow). Light background ‘Default’ text.
Section image with text element. 100% opacity with dark background and ‘Inverted’ text.