Use our custom background styles to add image, color, pattern or video backgrounds to your sections.
.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.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
.
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
.
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
.
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
.
Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.
Buy Sandbox