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

<section class="wrapper  bg-[#21262c] opacity-100  text-white"></section>

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

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

Color Background

Available options:

bg-[#ffffff], bg-[#3f78e0], bg-[#54a8c7], bg-[#45c4a0], bg-[#7cb798], bg-[#343f52], bg-[#f78b77], bg-[#d16b86], bg-[#747ed1], bg-[#e2626b], bg-[#a07cc5], bg-[#fab758], bg-[#e668b3], bg-[#5eb9f0], bg-[#605dba].

Content goes here

<section class="wrapper !bg-[rgba(63,120,224)] opacity-100 text-white"></section>

Soft Background

Available options:

!bg-[#edf2fc], bg-[#eff7fa], bg-[#edf9f6], bg-[#f3f8f5], bg-[#ecedef], bg-[#fef4f2], bg-[#fbf1f4], bg-[#f6f3f9], bg-[#fcf0f1], bg-[#f6f3f9], bg-[#fef3e4], bg-[#fdf1f8], bg-[#f0f8fe], bg-[#f0f0f8].

Content goes here

<section class="wrapper !bg-[#edf2fc]"></section>

Pale Background

Available options:

bg-[#e0e9fa], bg-[#e4f1f6], bg-[#e1f6f0], !bg-[#eaf3ef], bg-pale-navy, bg-[#f78b77], bg-[#f8e7ec], bg-[#e9eaf8], !bg-[#fae6e7], bg-[#f0eaf6], !bg-[#fef3e4], bg-[#fbe7f3], bg-[#e5f4fd], bg-[#e6e5f4].

Content goes here

<section class="wrapper !bg-[#e0e9fa]"></section>

Pattern Background

Content goes here

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

Video Background

Content goes here

<section class="video-wrapper bg-overlay ratio ratio-16x9 aspect-video">
  <video poster="./assets/img/photos/movie2.jpg" src="./assets/media/movie2.mp4" autoplay loop playsinline muted></video>
  <div class="video-content">
    <div class="container !text-center">
      <h2 class="text-[calc(1.285rem_+_0.42vw)] font-bold xl:text-[1.6rem] leading-[1.3]  !mb-0 text-white !text-center">Content goes here</h2>
    </div>
    <!-- /.container -->
  </div>
  <!-- /.video-content -->
</section>

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
image