This challenge came from the Theme Fusion forum. A user wanted to know how to constrain the height of a column with a background image to the height of the text in an adjacent column. While this sounds easy enough and the solution is simple, it was a little confusing at first because the column with the background image was always reverting to a size that matched the minimum height to proved a full version of the image.
To make matters worse, in live edit it appears correct, but once the page is rendered, the problem appears (image height below). This is happening because for some reason, when the page is rendered, Avada is injecting the empty placeholder svg image that is forcing the column to react. This does not get injected when another element is added. Oddly enough, in moving this content from the old site to this one, the behavior goes away, so this demo is not working the same way.
The solution is to drop a spacer element with no settings applied into the empty column and the problem goes away. The height of the background image is limited to the height of the content.
This is also related to a feature request I submitted some months ago to give us the ability to choose the background size and not tied to “cover” as the only option. You can submit a similar request if you think it is important.
Photo by Alison Pang on Unsplash
Image height
aliquet risus feugiat in ante metus dictum at tempor commodo ullamcorper a lacus vestibulum.
Content Height
This is a nested column showing the desired layout by simply adding the spacer.
Content Height
aliquet risus feugiat in ante metus dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia at quis risus sed vulputate odio ut enim blandit volutpat
Originally published on July 11, 2021
