Adapt User's Guide

Parallax Articles

course with image background of a lake
Parallax Articles Example

The Parallax Articles extension adds colors and images to the background of your Articles that appear “stuck” to the underlying page allowing other elements to float above.

Before you use Parallax Articles in your course, ensure your course is structured so that the articles you want to have parallax background images have only one or two components. Large, multi-block articles will break the effect.

Parallax Articles Settings

The settings for the Parallax Articles are found within the Article Settings, under the Parallax extension item.

Is Enabled
Enables the behavior. If not checked all other options are ignored.
Article Background Color
Determines both the background color and text color of the block.
The colors for each theme are different: These colors are documented on the individual theme’s page within this guide. The options are: None, Course Background, Primary, Secondary, Tertiary, Quaternary, and Course Foreground.
Background Image
An optional parallax background image.
Alternative Text
The alternative text for the background image.
Caption
A text caption that appears fixed to the bottom of the article.
This field is for use only with a very specific technique called “Full Screen Stories.” Using this field incorrectly will create content that cannot be read.
Force Article Height
Forces the article to be at least as high as the browser while centering the block within.

Parallax Graphic Requirements

Background images must be landscape images (wider than they are tall) and be either 1600px wide or 1200px wide. Images should be under 120KB in file size or the learner may not see the image (or course loading will be delayed significantly). Plan for the smallest image file size you can while still achieving an attractive background.

Use caution when using text in the background image. Most backgrounds will be partially or completely covered and are decorative only and remember this text may not be visible at all on mobile.