Background

Use our custom background styles to add image, color, pattern or video backgrounds to your sections.

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.

To add overlay on the background images use .bg-overlay class:

  • .bg-overlay Adds 50% overlay.
  • .bg-overlay.bg-overlay-300 Adds 30% overlay.
  • .bg-overlay.bg-overlay-400 Adds 40% overlay.

Dark Background

Content goes here

Gradient Background

Available options:

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

bg-gradient-primary, bg-gradient-aqua, bg-gradient-green, bg-gradient-leaf, bg-gradient-navy, bg-gradient-orange, bg-gradient-pink, bg-gradient-purple, bg-gradient-red, bg-gradient-violet, bg-gradient-yellow, bg-gradient-fuchsia, bg-gradient-sky, bg-gradient-grape, bg-gradient-reverse-primary, bg-gradient-reverse-aqua, bg-gradient-reverse-green, bg-gradient-reverse-leaf, bg-gradient-reverse-navy, bg-gradient-reverse-orange, bg-gradient-reverse-pink, bg-gradient-reverse-purple, bg-gradient-reverse-red, bg-gradient-reverse-violet, bg-gradient-reverse-yellow, bg-gradient-reverse-fuchsia, bg-gradient-reverse-sky, bg-gradient-reverse-grape, bg-gradient-blend.

Content goes here

Content goes here

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, bg-fuchsia, bg-sky, bg-grape.

Content goes here

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, bg-soft-fuchsia, bg-soft-sky, bg-soft-grape.

Content goes here

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, bg-pale-fuchsia, bg-pale-sky, bg-pale-grape.

Content goes here

Pattern Background

Content goes here

Video Background

Content goes here

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

Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.

Buy Sandbox