All Collections
FAQ's and Troubleshooting
Why Background Image Size Changes And Gets Cropped
Why Background Image Size Changes And Gets Cropped

The Divi Background Image System. Why background image might be cropped/resized or does not fit perfectly.

Karen avatar
Written by Karen
Updated over a week ago

When a background image is defined to a Divi module (like section, row, column or module) Divi tries to adapt the background image to cover up the entire element and keep the original proportion of the image applied. 

It's important to understand that background image is not a real element/content on your pages unlike the Image module or other images you add as a real content after a specific sentence or a specific content. 

The background image is a style for an element that is applies to the entire Divi module and background image cannot resize the module where it is applied to. If the module changes its size, the background gets resized according to the module size. 

How does this work in Divi?

By default, Divi puts the background images in the center position of the modules and expands or reduces the image to cover up the module size. 

The aspect ratio of the background image does not change to avoid squeezing or stretching the original image. For example, here is what happens when you try to apply 100x100px (square) background image to the text module with 100x150px size (landscape oriented):

As you can see the aspect ratio of the module is different than the background image aspect ratio. The width of two items are the same but the height is different, so the image needs to be re-scaled proportionally to keep the aspect ratio of the image. Everything that is outside of the module gets hidden.  

Here is another example. Let's try to apply a portrait oriented background image to a landscape oriented section. See the following screencast:

The default behavior of the background image module can be changed. You can choose to locate the background image on the top left, or on the bottom right. 

Here are all the available options under the background image settings:

Note: The background parameters are not available if you enable Parallax effect.

This also might look differently as you resize your browser's window or check the page on different screen sizes because all Divi modules support responsive mode and the aspect ratio of modules changes on different screens. 

For example, on big screens the text might take only 1 or 2 lines, but on smaller screens it will take more lines and the module will be bigger. This means the background image will be re-scaled to cover up the whole module.

We recommend using pattern-based background image or an image where the important part is shown in the center. In other cases you can play with the variations of the background image settings to get the desired result. 

Did this answer your question?