How To Use The Container & Column Background Options

The Background tabs of the Container and Column Elements offer a huge variety of choices, 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 seven sub-tabs – Color, Gradient, Image, Slider, Video, Pattern & Mask. The Column Element has the Color, Gradient and Image tabs. Let’s have a look in detail at each of these tabs.

The Color Tab offers a full color picker with an opacity slider (just click in the color circle), as well as the option to pick from the Global Color Palette (click on the globe icon), to allow for a full choice of background colors for your container or column. In the Image Tab section, there is also a Background Blend Mode, 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 color you like, with any level of opacity.

With the gradient 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.

To set a gradient, you first choose a Gradient Start Color and a Gradient Stop Color, and then set Gradient Start and End Positions. 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 can also work in conjunction with the Background Blend Modes, which we will look at in the next tab, Image.

The Image Tab allows you to add a single image to the Container or Column background. Images added as backgrounds fill the holding container or columns in different ways, 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, the Height Setting (on the General tab) and any padding applied to the container. They do have width however. On the default template of 100% Width, they can be the site width or the full width of the screen, while if you are using the Site Width Template, they fill the Site Width set in the Global Options (Layout > Site Width). So it’s important here 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. There are also options to control the image size with the Background Size option on the Image tab.

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 increased 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, it’s also possible to select a different background image for different 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 colors 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 Slider Tab allows you to add multiple images to the background of your container or column, just like a mini slider. Simply select your images from the media library, and set the options.

You can control the background position of the images, Skip Lazy Loading if the container or column is in the viewport upon load, loop the images, set pause on hover, set the speed of the slider, set an animation transition effect and speed as well as being able to use the Blend Mode in conjunction with background color and gradient.

See the Slider Images on Containers and Columns in Avada video for a quick rundown on this effect.

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 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, Transform options, and a Mask Blend Mode.