In this guide you will learn how to add an image inside a WPBakery column that is stretched so that it renders at the same height as the content column next to it. This is a popular affect that can be a bit tricky to figure out on your own, but it’s actually really easy to do.
Important: For a simple left/right layout you can use the theme’s Feature Box element instead. This guide is intended to explain how to do it with WPBakery where you have more control over the content displayed.
This is a screenshot of the end result we are looking for:
As you shrink/expand your browser and the content on the left shifts the image will always be the same height as the content next to it.
Step 1: Insert a Two Column Row and Enable Equal Height
The first step is to insert your 2 column row and enable equal height for the row. This will ensure that both the column will be the same height when they aren’t stacked (mobile display).
If you wish to display your image at the top mobile but on the right on desktop please see the following article on how to reverse column stack on mobile.
Step 2: Give Your Image Based Column a Background
For the column that you wish to add an image to you will do so by giving it a background. Make sure you select the “Cover” style background so that your image expands while keeping it’s proportions.
Step 3: Add a Minimum Height to Your Column
The last step is to add a minimum height to the column that has the background image. This is done for two reasons:
- Can be used to if the column with your content is too short and you want the image to display taller.
- When columns stack on mobile your column will have a 0px height because it doesn’t have any content. Adding a minimum height will ensure that your image is visible once stacked.
The Minimum Height field does accept CSS functions such as calc(), clamp(), min() and max(). You can also use responsive units such as vh, vmin or vmax.