Sandbox

Image Background

Content goes here

.image-wrapper class enables background-attachment: fixed; to disable image from scrolling with the page; along with background-size: cover; which scales the image as large as possible to fill the container. You can use the following classes along with .image-wrapper to change these behaviors:

.bg-auto Disables fixed background, changes background-size to auto.
.bg-full Disables fixed background, changes background-size to 100%.
.bg-cover Disables fixed background, but keeps background-size as cover.

View example's code

<section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="./assets/img/photos/bg1.jpg"></section>
  
<section class="wrapper image-wrapper bg-image bg-full bg-overlay text-white" data-image-src="./assets/img/photos/bg1.jpg"></section>

Dark Background

Content goes here

View example's code

<section class="wrapper bg-dark text-white"></section>

Gradient Background

Available options:

.gradient-1, .gradient-2, .gradient-3, .gradient-4, .gradient-5, .gradient-6, .gradient-7.

Content goes here

View example's code

<section class="wrapper gradient-3 text-white"></section>

Color Background

Available options:

bg-white, bg-primary, bg-aqua, bg-green, bg-leaf, bg-navy, bg-orange, bg-pink, bg-purple, bg-red, bg-violet, bg-yellow.

Content goes here

View example's code

<section class="wrapper bg-primary text-white"></section>

Soft Background

Available options:

bg-soft-primary, bg-soft-aqua, bg-soft-green, bg-soft-leaf, bg-soft-navy, bg-soft-orange, bg-soft-pink, bg-soft-purple, bg-soft-red, bg-soft-violet, bg-soft-yellow.

Content goes here

View example's code

<section class="wrapper bg-soft-primary"></section>

Pale Background

Available options:

bg-pale-primary, bg-pale-aqua, bg-pale-green, bg-pale-leaf, bg-pale-navy, bg-pale-orange, bg-pale-pink, bg-pale-purple, bg-pale-red, bg-pale-violet, bg-pale-yellow.

Content goes here

View example's code

<section class="wrapper bg-pale-primary"></section>

Pattern Background

Content goes here

View example's code

<section class="wrapper pattern-wrapper bg-image text-white" data-image-src="./assets/img/pattern.png"></section>

Video Background

Content goes here

View example's code

<video preload="metadata" poster="./assets/img/photos/movie.jpg" muted autoplay loop>
  <source src="./assets/media/movie.mp4" type="video/mp4">
</video>
<div class="content-overlay">
  <div class="container text-center">
    ...
  </div>
  <!-- /.container -->
</div>
<!-- /.content-overlay -->
</div>
<!-- /.video-wrapper-inner -->

Lower Start

Content goes here

View example's code

<section class="wrapper bg-soft-primary angled lower-start"></section>

Lower End

Content goes here

View example's code

<section class="wrapper bg-soft-primary angled lower-end"></section>

Upper Start

Content goes here

View example's code

<section class="wrapper bg-soft-primary angled upper-start"></section>

Upper End

Content goes here

View example's code

<section class="wrapper bg-soft-primary angled upper-end"></section>

Upper End & Lower Start

Content goes here

View example's code

<section class="wrapper bg-soft-primary angled upper-end lower-start"></section>

Upper Start & Lower End

Content goes here

View example's code

<section class="wrapper bg-soft-primary angled upper-start lower-end"></section>

Upper Start & Lower Start

Content goes here

View example's code

<section class="wrapper bg-soft-primary angled upper-start lower-start"></section>

Upper End & Lower End

Content goes here

View example's code

<section class="wrapper bg-soft-primary angled upper-end lower-end"></section>

Usage

Styleguide

Elements

Background

Image Background

Content goes here

Dark Background

Content goes here

Gradient Background

Content goes here

Color Background

Content goes here

Soft Background

Content goes here

Pale Background

Content goes here

Pattern Background

Content goes here

Video Background

Content goes here

Lower Start

Content goes here

Lower End

Content goes here

Upper Start

Content goes here

Upper End

Content goes here

Upper End & Lower Start

Content goes here

Upper Start & Lower End

Content goes here

Upper Start & Lower Start

Content goes here

Upper End & Lower End

Content goes here

Think unique and be creative. Make a difference with Sandbox.