Parallax Images
Parallax backgrounds
Parallax backgrounds can add interest to an article. However, they should be used sparingly as they are not guaranteed to be compatible on all devices.
They are automatically hidden on mobile devices and swapped out for background images using the following methods. Content can be inserted above the background; it should be tested to make certain the content does not overflow on mobile screens.
The background height is fixed at 400px.
<div class="parallax-window parallax-bg hide-for-small" data-parallax="scroll" data-image-src="https://placeimg.com/1000/600/animals" data-z-index="1"></div>
<div class="parallax-content" style="background-image: url('https://placeimg.com/1000/600/animals');"></div>Until you try, you do not know what you cannot do.
<div class="parallax-window parallax-bg hide-for-small" data-parallax="scroll" data-image-src="https://placeimg.com/1000/500/arch" data-z-index="1"></div>
<div class="columns contentArea parallax-content" style="background-image: url('https://placeimg.com/1000/500/arch');">
<h3 class="absolute-middle nomargin text-center">Until you try, you do not know what you cannot do.</h3>
</div>