I’ve seen a few people ask how to do this several times, so I thought I would make the answer official. This could technically be done easily using a background image in a column, but then the image would not have any SEO value, so people ask how to do with an Image module. It’s actually pretty easy, and in this tutorial I will show you how to make an Image module automatically fill the entire height of the column in Divi.
▶️ Please watch the video above to get all the exciting details! 👆
1. Set Up The Row, Column, And Image
The first step is to add a row to your layout. In our example, we will be using two columns, so select the two column layout.
Place an Image module into the first column on the left. In the other column, you can place any other modules you want, but in my example I’ll use a Text module. To make the text taller, I am duplicating the placeholder text two times.
Open the Row settings and go to the Design tab to the Sizing toggle and enable the Equalize Column Heights setting.
The screenshot below shows what I have so far:
NOTE: I added the red borders to the column for demonstrations purposes to show the height of the columns, but you would not need to do that.
2. Add A Custom CSS Class To The Divi Image Module
The first step is to add a custom CSS class to the Divi Image module. Using a custom class like this will make sure that our code only affects this particular image module with this class, rather than affecting all the images on your site.
Open the Divi Image module settings and go to the Advanced tab and open the CSS ID & Classes toggle. From there, copy and paste or write “pa-full-height-image-column” into the CSS Class input field, as shown in the screenshot.
3. Add The Custom CSS Code Snippets To Your Website
Where To Add The Code Snippets
Now that you have set up the row layout, image, and added the custom CSS class to the module, you can proceed to adding the code snippet below.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*this sets the height of the image module*/
.pa-full-height-image-column {
height: 100%;
}
/*this sets the height of the image container*/
.pa-full-height-image-column .et_pb_image_wrap {
height: 100%;
}
/*this sets the height and fit of the actual image*/
.pa-full-height-image-column img {
object-fit: cover;
height: 100%;
}The code is labeled with a few notes. Basically we need to set the height of the module, the image container, and the image itself to 100%. Then the last step is setting the image to object-fit: cover; which means the image will maintain it’s original aspect ratio and simply zoom in so that it fills the entire height and width of the container. Keep in mind, the image will appear “cropped” as the layout and column width changes, but this is necessary to achieve the effect.
This is very handy. I’ve been setting a background image on the column on desktops and using the image module on smaller devices. Your technique is so much better. Thank you!
Hey Jules,
We are glad to hear that we could offer some help.