Best way to achieve 3 full images across page?

[jtk]

I am trying to use three divs across the page. Each at 33.3%. I wanted them to be 100vh… I want the images to fill the entire space of each div. I am using flexbox to create the columns/grid. As you can see below, the images are not filling the entire div. I have the image centered via flexbox so you see the space on the top and bottom.

What is the best way to approach this? Thanks!

(Images not mine; used for testing only.)

---

Here is my public share link: https://preview.webflow.com/preview/kay-test?preview=6c55069cf2d695791d40f88362ad3083

[Filipa]

Hi @jtk
Use a background image instead.

[jtk]

I was hoping to not use background images so they could be read by Google. When a Flexbox grid is done with full images, is that normally done with BG images?

[jtk]

@Filipa Filapa , how did you put a background image just on the left 1/3 div? When I try and add the backgound image, it takes up the entire screen.

[Filipa]

There’s a css property that’s supposed to do what you’re looking for (not suported in IE though): object-fit.

1. Give your images the following class: image-cover

2. Style it:

width: 100%;
height: 100%;
max-width: none;

3. Add this to your custom code inside style tags:

.image-cover {
object-fit: cover;
}

4. Publish the site to check the result

It’s working here: http://filipasag.webflow.io/image-cover

[Filipa]

If you want to go with the background image option, you have to select the HP FlexChild Div and style the background image. To have different background images you have to give a combo class to the other two divs or duplicate the class and give it a new name. Otherwise the background image will be the same, as the elements share the same class.

[jtk]

@Filipa. Thanks!!! Still new enough to miss Combo Classes. Lol.