• Choose from a solid color, or a graident for a backdrop
  • Use an image that covers the background or is tiled
  • Opt for a locked background image
  • Choose to have an overlay color on top of your image
  • Add your own content within the banner drop zone
  • Add Parallax scrolling effect to banner background images
  • Choose from Fluid or Fixed-Width for your banner content
  • Choose a banner height for each breakpoint or use a flexible height
  • Opt for a "hero" banner whose height matches that of the browser
  • Use a standard or animated graident*
  • Set gradient angle

*Note: Animated gradients tend to be CPU intensive


The Banner stack was used to create the banner at the top of this page. We’ve opted for a gradient backdrop, and added our own content on top of it, using an image, a header and some text.

Using Banner


Remove Base Margin
Allows you to disable the preset standard spacing that is applied to the bottom of the Banner stack.

Inner Container
You can choose between a fixed-width for the inner portion of the Banner stack or make it fluid. Fluid allows the contents of the Banner stack to stretch out to the full-width, while fixed-width option allows you to set your own maximum width for the inner content.

Inner Max-Width
Set the maximum width you desire for your content in the Banner stack when using Fixed-Width as your inner container type.

Remove Left & Right Padding
When using the Fluid option of the Inner Container setting you are given the option of whether to remove the outer padding on the left- and right-hand sides of the Banner’s content container.

Hero Banner
Enabling this feature forces your banner area to take up the entire browser window. The exact size will depend on your visitor’s current browser size or the device that they are visiting your site on. You’ll want to experiment to make sure that this type of banner is right for your project or not.

Scroll Down Button
This feature is available only when the Hero Banner is enabled. It allows your visitor to click a downwards facing arrow icon and the browser scrolls upwards to show your content on the page. You can customize the look of the scroll down button’s background and arrow icon, as well as add a subtle shadow to it.

Banner Style
Choose what kind of banner you will have on your page. You can choose from an images, a solid color, a gradient or an animated gradient (note that animated gradients are processor intensive).

Banner Image

Banner Image
Drag-and-drop your image into the Banner Image drop zone to add a background to your Banner stack.

Background Image Type
Choose how you wish for your image to be displayed inside your Banner stack. You can choose from Cover or Tiled. Cover responsively sizes and / or crops the image, as necessary, to cover the entirety of your banner area background. Tiled allows you to take an image and repeat it both horizontally and vertically.

Lock Background
Enabling Lock Background sizes your image up to be the size of the browser. The image only shows though in the "window" that is your banner area so it appears as though your site’s other content is scrolling on top of your image which is locked into position.

Overlay Color
Choose a color, and adjust the opacity using the RapidWeaver color picker to create a beautiful overlay on top of your banner image. This can be used to help your banner content standout.

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.

  • Please Note: The Lock Background feature, if enabled, is replaces by the Parallax settings when you enable the Parallax effect.
  • Please Note: The Parallax effect automatically sets the background image type to Cover. This is in essential in order to achieve the Parallax effect.

Banner Color Backgrounds

Banner Background (Solid Color mode)
Use a color picker to choose whatever solid color you like to have as your banner background.

Gradient (Gradient mode)
Choose two colors to design your own gradient for your banner background. This page uses a gradient background for its banner to create a beautiful design.

Angle (Gradient mode)
Set the angle of your gradient background.

Gradient (Animated Gradient mode)
Choose 4 different colors for your gradient. The animated gradient will cycle through these colors subtlety.

Cycle duration
Set how long it will take for it to animate through the entire gradient. You set this value is seconds. The larger the value the more subtle and pleasing the animation will be.

  • Please Note: Animated gradients are processor intensive.

Banner Height

These options are not available when using Hero Banner mode.

Plus / Minus Circle
Then the plus circle is showing the banner is in Flexible mode. The banner height will adjust depending on the content that you’ve added to the banner. If you have no content in the banner when using Flexible mode the banner will be a height of zero.

When the minus circle is showing you will be presented with four different height settings. This allows you to set custom, fixed-height sizes for the 3 different breakpoints as well as for Large displays. The banner height is not flexible in this mode and if you have more content in the banner than will fit in this mode it will be cropped off.

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-2018 Elixir Graphics | Contact Us