Stretch an image vertically to fill a responsive column

[intercomputer]

I’ve been messing with this for an hour. Can’t get this image, which is supposed to be a background visual element, to stretch vertically in the column in multiple widths. I do have marginless columns set to on. It’s still not working.

I’ll also need to hide it at certain widths (like phone size), and I know there are shortcodes to do that, though I don’t know where to put in the shortcodes in the element to do that.

[paul.r]

Hi,

I have checked and can seee that you are on the right track in setting the image as background of your column.
You just need to tweak the background size. I have tried multiple background size values and I think the best one is to set your background size to 300px 100% or auto 100%

You can try other background property values from the link below.

https://www.w3schools.com/cssref/css3_pr_background-size.asp
https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=auto

Thanks

[intercomputer]

Thanks, Paul. Great answer. I went with auto 100%. I didn’t know you could combine the values like that. The W3schools links you sent were also very helpful.

[jade]

You’re most welcome!