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.