Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

When enabled a preset margin will be added to the base of the tool. Foundry allows you to configure the Base Margin preset to your liking within the Control Center. The Base Margin can be configured independently at each of the 6 responsive breakpoints.

The Background tool comes with several different modes to choose from to allow you to make use of it for a large variety of different tasks. Below you'll find each of the modes and the settings that will be shown for each:

Background allows you to create an overlay between the background element, whether it be an image gradient or something else, and the content within the Background tool. You can choose between using a Solid Color, a Linear Gradient or a Radial Gradient for your overlay. When you do you'll be presented with the appropriate color pickers for producing that overlay. These color pickers not only allow you to select one-off custom color but to also adjust the opacity of those colors as well.

Additionally if you do not wish to use an overlay you can select the None option. This is the default choice.

Allows you to decide whether you'd like to see the overlay in the Edit Mode area. Doing so can lead to a slower experience in Edit Mode sometimes, so this feature is off by default.

You can choose between the Background tool being a Fluid height, which adjusts automatically based on the content within the Background (the most popular method and default), Responsive mode, or Minimum Height mode.

Responsive mode comes with a series of other settings for adusting the height of the Background tool at each of the responsive breakpoints, as well as the units of measure for those height values.

Much like Responsive mode, the Minimum Height mode allows you to adust the height of the Background tool at each of the responsive breakpoints, as well as the units of measure for those height values. The difference here is that since we're setting a miniumu height the background can fluidly grow taller then our minimum height if necessary, whereas Responsive mode is a fixed, locked height.

When using the Responsive height mode you're also given the ability to tell the Background tool how you'd like your content within the Background area to be aligned vertically.

Foundry provides 5 different presets for rounded corners. These can be found throughout Foundry's various tools. You're also able to remove the roundness of the corners by setting this to none, or provide your own custom value for the border radius, or rounded corners. When using Custom mode you can set a different value on each of the four corners.

Used to add a decorative shadow to this tool. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.

Activating this feature will allow you to add a border around the Background tool using the settings below.

Here you can choose which of the four sides you'd like to have the border applied to. By default the border will be added to all four sides.

Allows you to choose from one of the preset thicknesses for your border. If you don't find a preset that meets your needs you can apply a Custom border size instead.

Use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You're also provided a color picker for setting to choose a custom one-off color.

Activating this feature creates a parallax scrolling effect for your Background image. This moves, scales or fades the image slightly as the user scrolls through the page in either the upward or downward direction.

This feature can only be applied to background images.

This is essentially a relative value that determines the amount of parallax that is applied to your background image. Generally the default value will be optimal.

Choose whether to have your background image scroll, scale, or change its opacity as the user scrolls through your page.

Here you can apply a CSS-based filter to your background images, as well as adjust the intensity of those filters. You're able to apply any combination of these filters: Blur, Contrast, Grayscale and Saturate.

When enabled content within this tool can exceed the bounds of this parent item. This is helpful, as an example, if you have something with a drop down or drop shadow within the this tool that would need to go outside of the content area. This is enabled by default.

Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.

This field allows you to replace the default HTML Comment with your own text.

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.