Streaming live at 10am (PST)

Force div with only bg image to go 100% high and wide?


#1

I’ve got a collection that I want the images to be all sized the same in a collection list. To do this, I’m creating a div with the background image set from the collection and set to cover. How do I set this div so that it can show the full height and width of the column of the collection list row no matter how tall it gets? Is this even possible?


#2

Do you have a read-only link? I can send you an answer via a gif …


#3

Sure, I created this site:
https://preview.webflow.com/preview/test-0d5602?preview=06567a7ccb29b3fbea6872e7d1ac5ca0

You can see the bg on the left doesn’t fill the full column height unless I set the column OR div to a pixel number. Auto or 100% doesn’t work. TIA!


#4

Hello @chippwalters

You need to change the width of your div to 100% to cover the width of the column, but for the height is a little bit different; if you’re using columns for this I would suggest change the display style of your row to flex and set to expand.

I made a small video:

Hope this helps.


#5

Thanks! That helps :slight_smile: Much appreciated!