Docs

[saolremarketing]

I would like to have a photo in the background of a column that grows/shrinks with the size of the row based on the content flow of the column next to it in two column row. So responsively when window gets bigger or smaller the photo is half of the page and vertically sized the same as the text requires.

I am currently using (it doesn’t work):

STYLE: background-image: url(‘/wp-content/uploads/2016/08/CBRE-Forum-1280×970-Final-min.jpg’); background-attachment: scroll; background-position: center; background-repeat: no-repeat; background-size: cover;

But it doesn’t seem to have any height. I want it to have the height of the column next to it and just fill in the photo size necessary to fill.

current image is 1280×970 … its the picture of the building.

What am I doing wrong?

http://770.6db.myftpupload.com/about/

WordPress 4.6
Cornerstone 1.3.1
X 4.6.1

Thanks

Brian

[Friech]

Hi Brian,

Thanks for writing in! Please assign a class column-a on your left column (text) and class column-b for the right column. And then add the code below on Custom > Global JavaScripts on Customizer.

jQuery(document).ready(function($){
$(".column-b").height($(".column-a").height());
});

That should make both column the same height.

You can even utilise the class column-b to style the right column.

e.g.

.column-b {
	background-image: url('/wp-content/uploads/2016/08/CBRE-Forum-1280×970-Final-min.jpg');
	background-attachment: scroll;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

Hope it helps, Cheers!

[saolremarketing]

That doesn’t seem to work. I think I set it up correctly.

I don’t have any Customizer entries that end with a ); they all end with }

I am not sure which part isn’t working.

Here is what I entered:

.column-b {
background-image: url(‘/wp-content/uploads/2016/08/CBRE-Forum-1280×970-Final-min.jpg’);
background-attachment: scroll;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
jQuery(document).ready(function($){
$(“.column-b”).height($(“.column-a”).height());
});

And then put “column-a” on left column class and “column-b” on the right column class

Thanks

[Christian]

You placed the jQuery code in the CSS. You need to put it in Appearance > Customize > Custom > Global Javascript as stated in the previous reply.

Thanks.

[saolremarketing]

OK, sorry first time I ever put something in that section.

Thanks

[Joao]

You are welcome,

Let us know if you need help with anything else.

Joao

[Author]

Posts