CODEWITHSUNDEEP
csszurb-foundation
edA-qa mort-ora-y
edA-qa mort-ora-y

Reputation: 31861

Zurb Foundation how to make image fill a cell in a grid row

I want to make an image fill a cell in a grid row. I want to use the CSS background-size: cover property to allow it to scale to fill the cell accordingly.

For example:

<div class='row'>
    <div class='medium-6 columns'>
        <div style='
        background: url("/img/picture.jpg");
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;'></div> 
    </div>
    <div class='medium-6 columns'>
        ... bunch of text ...
    </div>
</div>

How can I get that div in the first cell to expand to the entire cell space?

Note, I'm not using an img element since I'm trying to get the cover behaviour. If there is a way to do that using img I can do that instead.

I don't know if the answer will be Foundation specific or CSS generic. Either will do, provided it works in Foundation grids.

Upvotes: 0

Views: 2476

Answers (2)

Charles Butler
Charles Butler

Reputation: 573

You can create an equal height container using a few data attributes. Apply the data-equalizer attribute to a parent container. Then apply the data-equalizer-watch attribute to each element you'd like to have an equal height. The height of data-equalizer-watch attribute will be equal to that of the tallest element.

Read more here: http://foundation.zurb.com/docs/components/equalizer.html

Upvotes: 1

fontophilic
fontophilic

Reputation: 1085

The issue is your background-image div has no height or width or content.

.medium-6 will afford width (as a percentage), but not height. If you want the background-image div to be of the same height as the "bunch of text" div, you should use the Zurb Block Grid, which is similar but uses display: inline-block; so each sibling inherits the greatest height.

You could also use display: table-cell on "bunch a text" and "background image" and display: table-row on .row.

Upvotes: 0

Related Questions