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.
Horizontal Background Position
The horizontal position of the image. Options are “Top”, “Center” or “Bottom”.
Vertical Background Position
The vertical position of the image. Options are “Left”, “Center” or “Right”.
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.
Force Block/Component Transparency
Completely removes the background of any block or component in the article as well as any shadow on them.

DANGER: Accessibility

If you remove the background from the block/component there is no way for Adapt to assist with contrast nor is there any way for you to control the placement of text. This option only works if the background and text have sufficient contrast at ever pixel in the image. Use With Caution!

Inner Shadows
Adds a slight inner shadow to the article that gives the article the appearance of being “in-set”.
Remove Fixed Background Positioning
Returns the image to the regular flow of the document — that is, elements will no longer scroll above the image. Particularly useful for boxed layouts or when you are trying to achieve a specific effect with image placement.

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.