How To Use The Container & Column Background Options
The Background tab of the Container and Column Elements have had an overhaul with Avada 6.1, and in this document, we will look at the full range of possibilities with background options in these foundational elements. The BG tab (background) has 4 sub-tabs in the Container element – Color, Gradient, Image and Video. The Column Element has the same options, with the exception of the Video tab. Let’s have a look in detail at each of these tabs.
The Color Tab
The Color Tab is unchanged from previous versions and offers a full color picker with an opacity slider, to allow for a full choice of background colors for your container or column. What has changed, however, is how this color can interact with a background image or video. There is now 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.
The Gradient Tab
A Gradient background tab has been introduced with 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
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 1100px, it would be wise for any column background image to also be at least 1100px.
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.
Background Blend Modes
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 (Containers Only)
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.