# 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

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

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

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

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