Features

  • 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
  • Add an overlay on top of your background
  • Include a drop shadow behind the Backdrop stack

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.


Using Backdrop

General

Backdrop Style
You can choose between four different backdrop styles:

  • Image
  • Color Picker
  • Gradient Preset
  • Custom Gradient

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.

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.

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

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.

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.

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

Sign up for The Forge newsletter

Stay up to date on future versions of Foundry, as well as important news, updates and more!

This site is built using Foundry for RapidWeaver

© 2006-2016 Elixir Graphics | Contact Us