Backgrounds

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 components included with Front Street like background shading, sliders, and parallax effects.

In order for the background components 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 components are initially loaded.

Component Stacking

The following table helps to illustrate how your content and background components are stacked within a .fs-section element.

Element Description Z-Index
.fs-bg-slider Auto-rotating, slow-fading slider images. 0
.fs-bg-parallax Parallax images that animate as the user scrolls. 0
.fs-bg-video Auto-playing background video. 0
.fs-loader Optional loader component; this can be helpful when working with background media that might need time to load. 1
.fs-bg-shade Sits between other background components 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.

Learn 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.

Learn More

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 components. In other words, just because your section has a cool, fancy background component, 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 component. 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.

Learn More

The following shade-* classes can also be combined with the .fs-bg-shade component 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.

Learn More
Element Shade Opacity
.fs-bg-shade.shade-05.{color} 5%
.fs-bg-shade.shade-15.{color} 15%
.fs-bg-shade.shade-25.{color} 25%
.fs-bg-shade.shade-50.{color} 50%
.fs-bg-shade.shade-75.{color} 75%
.fs-bg-shade.shade-85.{color} 85%
.fs-bg-shade.shade-95.{color} 95%

Background Slider

For a slow-fading, auto-rotating background slider, we can add the .fs-bg-slider component to our sections. The background slider will automatically stretch images to fill the .fs-section; this is really helpful when implementing a section that stretches full width of the browser window.

Important This is completely separate functionality from our other slider components, which are implmented with OwlCarousel.

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.

Learn More
Loading
<div class="fs-bg-slider"> <img src="image-1.jpg"> <img src="image-2.jpg"> <img src="image-3.jpg"> <img src="image-4.jpg"> </div>
Loading

You may have noticed that the above example is a little busy and our hero message is difficult to read. To fix that, we can pair our background slider with a background shade.

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.

Learn More
Loading
<div class="fs-bg-slider"> <img src="image-1.jpg"> <img src="image-2.jpg"> <img src="image-3.jpg"> <img src="image-4.jpg"> </div>
Loading

By default, the background slider component will rotate images every four seconds (i.e. 4000ms). You can change that by passing a new millisecond value through a data-autoplay parameter. Keep in mind that this value must be 1000 or higher.

<div class="fs-bg-slider" data-autoplay="2000"> </div>
Loading

Background Parallax

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.

Learn More
Loading

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.

Learn More
<figure class="fs-bg-parallax"> <img src="image.jpg"> </figure>
Loading

And of course, background shading works great here, too.

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.

Learn More
Loading

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.

Learn More
<figure class="fs-bg-parallax"> <img src="image.jpg"> </figure>
Loading