How To Use The Container & Column Background Options

The Background tabs of the Container and Column Elements offer a huge variety of choice, and in this document we will look at the full range of possibilities with background options in these foundational elements.

The Background tab in the Container element has six sub-tabs – Color, Gradient, Image, Video, Pattern & Mask. The Column Element has the Color, Gradient and Image tabs. Let’s have a look in detail in each of these tabs.

The Color Tab offers a full color picker with an opacity slider, and the options to pick from the Global Color Palette, to allow for a full choice of background colors for your container or column. There is also a Background Blend Mode, in the Image Tab section, which allows you to control how the background color or gradient can interact with a background image. More on that later.

Containers, by default, have a transparent background, and columns are empty, but both can have any colour you like, with any level of opacity.

A Gradient background tab was introduced back in Avada 6.1. With this tab, you can add gradient backgrounds to your Container or Column Element, with a range of options for gradient colors, start and stop positions, type and direction. The gradient colors can also have opacity, just like in the Color tab. The default type is Linear, but you can also choose Radial.

As you can see in the screenshot below, you first choose a Gradient Start Color and a Gradient Stop Color, and then set a Gradient Start Position and a Gradient End Position. This controls how the two colours of the gradient blend. Experiment with these to see how this affects the gradient, but the default values of 0 and 100 give you the smoothest gradient.

If you choose Linear as the Gradient Type, the last option is Gradient Angle, and here you can choose from a full 360 degrees. If you choose Radial as the Gradient Type, the last option becomes Radial Direction, and here you can choose from Left Top, Left Center, Left Bottom, Right Top, Right Center, Right Bottom, Center Top, Center Center, and Center Bottom.

With these options you can create gradients of almost any type. These gradients also work in conjuntion with the Background Blend Modes, that we will look at in the next tab, Image.

The Image Tab allows you to add an image to the Container or Column background. Images added as backgrounds stretch or shrink to fill the the holding container or column, but containers and columns are a little different in this regard, so let’s look at them individually.

It’s important to note that Containers have no height by default, even with a background image added. The only things that affect the height of a container are the content and the padding applied to the container. They do have width however, which on the default template is the Site Width, or if you are using the 100% Width Template, they can be the site width or the full width of the screen. So it’s important that the images added are big enough to show in the container without pixellation. Background images added to containers therefore need to be at least as wide as the site width.

With containers, the image initially shows at the full width of the container, so if the container height grows, whether with content or padding, the full image’s height will eventually be displayed, and then, if the height continues to increase, the full height of the image will remain, and the width will start to crop in as the image has to stretch to fill the container.

Columns, on the other hand, increase in size when a background image is added, and by default, show the full background image, so again, it’s important that the images added are big enough to show without pixellation. For example, in a full width column on a site with a Site Width of 1200px, it would be wise for any column background image to also be at least 1200px.

If a column’s height is then incresed past the height of the image, either through padding or content, then again, the full height of the image will be shown and the image’s width will start to crop. Please experiment yourself with background images to make sure you understand the implications when adding background images to containers and columns.

On both Containers and Columns, with Avada 7.10 and up, it’s now possible to select a different background image for diferent screen sizes.

On the Background Tab > Background Type > Images you will see a Responsive icon next the the Background Image Title. Just use this icon to switch to the various screen sizes, where you can upload a specifically sized image to display on the particular screen size.

With the new Background Blend Modes, you now have multiple options with blending background colours or gradients with background images. There are 15 Blend Modes to choose from, and these determine how the image and any background color or background gradients will interact with the image. Experiment with these blend modes to see how they interact with the background images. If you use a blend mode, you can also use opacity in your colors to affect the overall effect.

If Background Blend Modes are disabled, however, then a background image will always show on top of a background color, regardless if that background color has opacity or not. (In the past, we automatically set a blend mode of overlay if the alpha of the background color was less than 1). But gradients are a type of background image, and so gradients with opacity will still show as overlays on top of background images.

See the video at the top of the page for visual examples of this.

The Video Tab can be used to add a video background to a container. Videos of course can be added in many ways, with any of the three video elements, into a container or column, but adding a background video can sometimes be a useful tool.

The mp4 format is the only required file type, although there are two other optional file types for full browser compatability. You can also add a YouTube or Vimeo video instead. You can control the aspect ratio, loop and mute the video, and there is also a field for a fallback preview image for older browsers.

Like images, it’s important to remember that containers have no inherent size, and so don’t automatically resize to a video’s dimension. So the best user case for background videos is for videos that act in a background capacity, rather than being the main content. There are ways to resize the container to closer fit the video, but it’s not really designed for that. See the video at the top of the page for more information on the various ways you can use video backgrounds.

The Pattern tab allows you to add a pattern above other background elements. There are a range of preset patterns as well as a custom options where you can allow you to upload an svg pattern.

There are also a number of options to control the pattern, from Pattern Color, Pattern Style, Pattern Opacity, Pattern Size, and Pattern Blend mode.

The Mask tab allows you to add a mask over your container. A mask is intended to hide certain parts of the container, so it can only work with containers that have background colors, gradients, images etc. There are a range of preset masks as well as a custom options where you can allow you to upload an svg mask.

There are also a number of options to control the mask, from Mask Color, Mask Style, Mask Opacity, Transofrm options, and a Mask Blend Mode.