Background sections can be useful for landing pages and other places you need content to really stand out. And instead of just standard background images, these sections can include special background blocks included with Front Street like background shading, and parallax effects.
In order for the background blocks and your section's inner content to be all z-index'ed and positioned properly, we need to follow a basic markup structure. Your wrapping section element should have the class fs-section. And any content within should be wrapped in an element with class fs-element.
Take note that we also added classes bg-dark to .fs-section. Adding a background color class can be helpful to establish a base color, before background blocks are initially loaded.
Stacking
The following table helps to illustrate how your content and background blocks are stacked within a .fs-section element.
Element
Description
Z-Index
.fs-bg-parallax
Parallax images that animate as the user scrolls.
0
.fs-bg-video
Auto-playing background video.
0
.fs-loader
Optional loader block; this can be helpful when working with background media that might need time to load.
1
.fs-bg-shade
Sits between other background blocks and content, to add a layer of any opaque color.
2
.fs-element
Contains any top-level content; it's okay to have multiple .fs-element within a section, too.
3
Base Example
Here's the base example we'll be building on throughout this document. We've just got some basic elements added to a blank section to create hero-like thingy.
Lorem Ipsum Dolor
Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui.
Important Keep in mind that .fs-section and .fs-element do not include any visual styling by default. So you'd need to add any padding, height, or other visual styling in your stylesheet. The padding and margin you see attached to .fs-section of this document are added from our documentation's styling.
Background Shade
Background shading can prevent your content from being overpowered by your background blocks. In other words, just because your section has a cool, fancy background block, we still probably want the user's attention to be drawn to our primary message, sitting on top. And in a lot of cases, this can also simply help any text to just be more readable over top a busy background element.
In the following example, we've got a section with a background image applied with some simple inline CSS (for demo purposes). Then we add our .fs-bg-shade.{color} background block. You can use any color class for your shade color, but you must add a color class.
Lorem Ipsum Dolor
Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui.
The following shade-* classes can also be combined with the .fs-bg-shade block to adjust the opacity. In the following example, we're adding class shade-85 to make the shade color more prominent, and thus wash out the background image more.
Lorem Ipsum Dolor
Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui.
If you're looking for a smoothe parallax background effect, we've got you covered. —
Many other parallax scripts out there will dynamically adjust the background-position property of a background image as the user scrolls. But this produces an often janky effect, depending on the screen. So instead we use JavaScript to adjust the CSS transform property of an absolute-positioned image. Using CSS 3D transforms in this way creates a more consistently smoother effect in modern browsers, even on Hi-DPI screens like your Retina MacBook.
Important To keep fighting the good fight towards mobile optimization, the parallax script will not run on mobile devices. Intead, the image will just get positioned absolutely, resulting in a similar effect to just adding a background image.
Lorem Ipsum Dolor
Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui.
Loading