We’ve included a few examples of the Backdrop stack below, with a a bit of text and some headers contained within these examples.
You can choose between four different backdrop styles:
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.
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.
Used to choose a color when using the Color Picker Backdrop Style.
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.
Adjust the angle of your custom gradient when using the Custom Gradient Backdrop Style.
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.
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.
This is essentially a relative value that determines the speed at which the parallax effect occurs. Generally the default value will be optimal.
Choose whether to add a drop shadow to your Backdrop stack.
Increase the shadow size for your Backdrop when the drop shadow is enabled.
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.
Use a color picker, along with the opacity slider as well, to set the color you wish your drop shadow to be.
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.
Set the size of the border around your Backdrop stack. A border size of 0 will remove the border from the Backdrop stack.
Use a color picker to set the color of the border.
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