Skip to content
Adapt User's Guide version 4.5

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.

No Article or Block Text

Article and Block text are not supported in ‘boxed’ themes. All body text must be within a component. In addition, some block titles may not function as expected in other fluid themes.

Parallax Articles Settings

The settings for the Parallax Articles are found under the Parallax extension item.

Enables the behavior. If not checked all other options are ignored.

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.

An optional parallax background image.

The alternative text for the background image.

The horizontal position of the image. Options are “Top”, “Center” or “Bottom”.

The vertical position of the image. Options are “Left”, “Center” or “Right”.

A text caption that appears fixed to the bottom of the article. Using this field incorrectly will create content that cannot be read.

This field can be used with a technique called “Full Screen Stories.”

Forces the article to be at least as high as the browser while centering the block within.

Completely removes the background of any block or component in the article as well as any shadow on them.

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!

Adds a slight inner shadow to the article that gives the article the appearance of being “in-set”.

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.