Help getting background image to cover column

Design help General
1

Hi,

I am trying to format a picture in a two column row so that it continues to fill the column as the other column gradually gets bigger than it. You can see the test site at https://preview.webflow.com/preview/waxys08?preview=b5cebf842e731b88c16a2b8fd4975186

Go to the page “Waxys location page”

Essentially am trying to avoid a situation where the RHS column height creates a space below the image:

1124×1055 941 KB

I am trying to format the column/image so that the image always fills 100% height and any overflow is hidden.

I have tried adding the image as a background image to the column but cannot make it fill the column, also tried a div with a background image in the column.

When I set the image to 100% height it distorts horizontally as the column gets smaller.

Any help would be appreciated.

Thanks,

John

2

Try to put a div in the column, then use your image as a background of this div. Set the background to poster, center, and set the div 100% geight and width… does this work for you?

3

Hi Vincent, when I set the div to 100% height and width it does no register any scale from the background image so the div disappears with a height of 0.

4

“Hi Vincent, when I set the div to 100% height and width it does no register any scale from the background image so the div disappears with a height of 0.”

I go look now

5

Instead of putting your image in the div I told you to create, call this image as a background of the div, then you’ll get the poster option.

http://vincent.polenordstudio.fr/snap/Webflow_-_Waxys_08_2015-03-26_14-32-40.jpg

6

Hi Vincent, I had tried this but I must be doing something incorrectly, possibly to do with inherited styles?

See image here shows the background image added to the div:

1601×707 775 KB

As soon as I make the DIV 100% width and height it seems to close down to a height of 0:

1602×616 583 KB

7

can you let the site as it shows in your last first capture? So I can try to make it work (I cant add imgs by myself on previews)

8

Hi Vincent,

I will duplicate that block so that there is one with a background image and one with an image inserted in the div.

Thanks for your time, I appreciate the help.

9

Hi Vincent, you should be able to see a duplicate block with image inserted in the div: https://preview.webflow.com/preview/waxys08?preview=b5cebf842e731b88c16a2b8fd4975186

10

Ah! I’m stuck like you. Can’t get a column to expand to the row size vertically.
I tried with divs without row without luck.
There must be a way to achieve what you want though… hmm…

11

Hi Vincent, the developers here say it can be done using JS - matchHeight - a responsive equal heights library for jQuery · code by @liabru and the picture in the div, I was wondering if there was a way of achieving this within webflow. I think the main issue seems to be:

Div will not expand to 100% of row size, the size of div is determined by its contents (absolute position of 100% does not seem to work in a column block - when you choose this option the div jumps above the column.)

Div does not use background image as a % measure

Setting image div to 100% height means that the image scales horizontally as the columns get narrower.

John

12

Oh yes, JS. Here we have a typical CSS issue: elements can’t expand 100% height when they don’t know any height of any parent. JS comes to the rescue, calculating height.

That would be great if in the future, Webflow knows to identify such a case and work a JS magic in the background so it’s transparent for us.

I’m not too skilled into flexboxes but I think this is a case were this layout is a no-brainer with flexboxes. (<- this has a good 10% possibility of being total made up BS)

1 Like
13

Hi Vincent,

Figured out how to do this without JS!

I set the column row to 35% VH, this presented a reasonable vertical height across responsive.
Then I set each column to an absolute position based on this parent (the left hand col positioned to the left, right hand column positioned to the right).
Then set background image on left hand col
Set text container div in right hand column to 100%

Works! Phew.

See the block that has text San Antonio in the RHS col: https://preview.webflow.com/preview/waxysfeaturetest?preview=6e62f2b3f1c4a59177098643429935b3

John

2 Likes