Maintaining the integrity of your background images across different devices and screen sizes is crucial for a consistent and professional website appearance. Unintended size changes and cropping can distort your images, detracting from your site's visual appeal.
In this article, we will guide you through the process of preventing background image size changes and cropping in Divi.
When a Background image is defined for a Divi module, such as a Section, Row, Column, or Module, the browser will try to adapt the background image to cover the entire element's size (width and height) while keeping the original proportion of the image applied.
Note: Background Images are styling properties. They are different and work differently than Images added using the Image module.
For more information about Background Images, please check the official MDM documentation.
The Background image is a style rule applied to an element. If the element's size changes, the Background image's size will change according to the element's new size.
How does this work in Divi?
By default, Divi sets the background images in the center position of the element and expands or reduces the image to cover up the entire element.
The aspect ratio of the Background image does not change to avoid squeezing or stretching.
Background Image Size options
Open the element's settings by clicking on the Gear icon
Go to Content Tab → Background → Background Image
Use the Background Image Size option to adjust the size of the Image:
Cover - will force the image to cover the entire element's size
Fit - will force the image to fit inside the element's container
Actual size - will use the actual size of the image
Stretch to Fill - used if the background image is smaller than the element. Using this option will distort your background image, especially if the images are smaller in size than the element to which they are applied
Custom size - it allows you to define a custom size for the Background Image
Use the Background Image Position option to control the placement of the image:
Example 1
Check the GIF image below to see what happens when you try to apply a 100x100px (square) Background image to a Text module, which is 100x150px (landscape-oriented):
As you can see, the module's aspect ratio differs from that of the Background image. The width of the two items is the same, but the height is different, so the image will be scaled up while preserving its original aspect ratio to convert the entire module size. Parts of the Background image that are now outside the Module's container will be cropped out.
Example 2
Applying a portrait-oriented Background image to a landscape-oriented Section. See the following screencast:
Like in the first example, we can see that the Background Image is scaled up to fit the entire Section's size, while parts of the image that exceeds the Section's container will be cropped.
When you set a Background image for any of the Divi elements, its default Size will be Cover - meaning it will try to cover the entire element's size, and the Position of the Background image will be Center.
Because of the default Size and position, the background image will scale up or down from the center of the element until it covers the entire size of the element.
Notes:
The Background Image size, Position, and Repeat are unavailable if the Use Parallax Effect option is enabled.
We recommend using a pattern-based background image or an image showing the important part in the center. In other cases, you can play with the variations of the background image settings to get the desired result.