Have the background image of a PB row span its full height

Hi folks,

I have a page with one PB row, which contains one PB editor widget. The row has a background image (and is configured “full width stretched”).
As things work now, the background image is displayed for the full width, but in terms of height - for only as far as “needed” to provide background for the text in the editor.
I’d like for the image to display in full height. How do I do that? I tried all sorts of “height” and “background-size” CSS for the row and could not get there.

Thanks!
Doron

Hi,

Something like this would do it (just make sure you change the page ID with your actual ID):


@media (min-width: 1024px) {
	.page-id-8 .panel-row-style {
		min-height: 100vh;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-align-items: center;
		align-items: center;		
	}
	.page-id-8 .panel-row-style .panel-grid-cell {
		width: 100%;
	}
}

The code will also center your content vertically. If you don’t want that, simply remove all the flex stuff.

Fantastic! That worked. The min-height=100vh did the trick, and the flex/align-items was a cool bonus.

(for posterity and other readers - I ended up giving the rows I wanted to get this treatment a new class name using the Sydney / PB row config “Row Class”, and used the above suggestion to configure this new class - helped me applying this to multiple pages / rows).

You guys are outstandingly helpful. I can’t thank you enough.

Happy to help. You’re welcome to rate the theme if you enjoy it: https://wordpress.org/themes/sydney/

You bet! I already did. :slight_smile: