Backdrop

Potion Pack addon stack

Create stylish backgrounds using CSS-based gradients or images for various sections of your page. Backdrop comes with a large assortment of pre-built, gorgeous gradients.

  • Choose either a solid color, image, pre-set gradient or custom gradient for your background
  • Opt to round the corners of the Backdrop
  • Include a border as well as set its width and color
  • Use drag-and-drop or remote images for your backdrop
  • Use alternate Dark Mode image for backdrop
  • Add an overlay on top of your background
  • Include a drop shadow behind the Backdrop stack
  • Apply an inset shadow to your backdrop
  • Use Foundry Brand Preset colors for backdrop

Example

We’ve included a few examples of the Backdrop stack below, with a a bit of text and some headers contained within these examples.

Preset Gradient

This example uses the Backdrop stack to create a nice gradient background using one of the many preset gradient options. This particular preset is called "Commet" and works really well with light colored text on top of it.

Image

This example uses the Backdrop stack to create a beautiful background using the stack’s image background option. This allows you to insert any image you like into the background. In this case we’ve used a lovely Unsplash photograph and added a subtle overlay to the background to help our text stand out.

In this case we’ve used the "Cover" feature so that the image covers the entirety of the background at all times. You can also setup tiled images for the background as well.

Locked Background

This example uses the Backdrop stack to create a beautiful background using the stack’s image background option. This allows you to insert any image you like into the background. In this case we’ve used a lovely Unsplash photograph and added a subtle overlay to the background to help our text stand out.

In this case we’ve used the "Cover" feature so that the image covers the entirety of the background at all times. We’ve also locked the image into place so the content scroll on top of it. You can also setup tiled images for the background as well.

  • Please Note: Features marked with the purple moon icon will include color picker(s) or other controls for Dark Mode when Dark Mode is enabled.

Using Backdrop

General

Backdrop Style
You can choose between six different backdrop styles:

  • Image
  • Remote Image
  • Color Picker
  • Gradient Preset
  • Custom Gradient
  • Brand Preset

Image Drop Zone
Presented when you have selected Image as your Backdrop Style. This is where you will drag-and-drop your image that you wish to use for your background.

Use Dark Mode Image
When enabled you're presented with an additional image drop zone. This second drop zone allows you to choose a secondary backdrop image that is shown when a visitor who has Dark Mode enabled in their browser or on their device views the page.

Remote Image
Allows you to enter a URL to an image on your server that will be used as the background image for your Backdrop stack. Like the drag-and-drop image support you're also able to make use of the "Use Dark Mode Image" feature when using Remote Images. This means that is "Use Dark Mode Image" is enabled you will be able to supply a secondary URL for a Dark Mode image.

Brand Preset
When Brand Preset is chosen as your Backdrop Style you'll be given a drop down that allows you to select one of Foundry's brand preset colors (Primary, Success, Info, etc). These presets are configured in the main Foundry Control Center stack.

Bkg. Image Type
Allows you to choose between a Cover or Tiled background. Cover backgrounds will adjust your image (both sizing and cropping it) to make sure it always covers your Backdrop’s background area fully. Tiled allows you to use a smaller image and tile it over your background in various ways using the tile controls.

Horz. Img Align & Vert. Img Align
Allows you to adjust the horizontal and vertical alignment of your background image. This is mostly useful when using the Tiled Backdrop Style.

Tiled Repeat
Choose which direction(s) your Tiled image will repeat. You can choose to have it repeat, or tile, in a horizontal or vertical direction, or choose to have it tile in both directions.

Color Picker
Used to choose a color when using the Color Picker Backdrop Style.

Gradient Preset
Shown when using the Gradient Preset Backdrop Style. Allows you to choose from a vast array of different, preset gradients.

Gradient (Top & Bottom Color)
These two color pickers are present when using the Custom Gradient Backdrop Style. They allow you to set the two colors used in your custom gradient.

Angle
Adjust the angle of your custom gradient when using the Custom Gradient Backdrop Style.

Overlay Color
Apply an overlay on top of any of your Backdrop Styles. Allows to change the tone of the backdrop or make content within the Backdrop stack more visible.

Hover Overlay Color
Allows you to define a different color for your backdrop’s overlay when the visitor hovers over the backdrop stack.

Enable Parallax Effect
Turning on this feature creates a parallax scrolling effect for your banner’s background image. This moves, scales or fades the image slightly as the user scrolls through the page in either the upward or downward direction.

Parallax Style
Choose whether to have your background banner image scroll, scale, or change its opacity as the user scrolls through your page. There are also two combination options that pair Scroll & Opacity or Scale & Opacity together.

Parallax Speed
This is essentially a relative value that determines the speed at which the parallax effect occurs. Generally the default value will be optimal.

Shadow

Drop Shadow
Choose whether to add a drop shadow to your Backdrop stack.

Shadow Size
Increase the shadow size for your Backdrop when the drop shadow is enabled.

Shadow Offset
Allows you to adjust the distance in both the horizontal and vertical directions that the shadow will extend. You can use both positive and negative numbers for these two settings to obtain different looks for your shadow.

Shadow Color
Use a color picker, along with the opacity slider as well, to set the color you wish your drop shadow to be.

Inset Shadow
When enabled an inset shadow is applied to your backdrop image to make it look inset into the page. You can configure the shadow size and color when using this feature.

Corner Styling

Round Corners
Opt to round the corners of the Backdrop stack. You can round all the corners uniformly or choose to set a different border radius values for each of the four individual corners.

Border Styling

Border Size
Set the size of the border around your Backdrop stack. A border size of 0 will remove the border from the Backdrop stack.

Border Color
Use a color picker to set the color of the border.

Insight
Presets

Backdrop comes with a wide variety of pre-built gradients to help you get a modern looking background for your content with very little effort.