Most of Divi's Design options can be optimized for better user experience, especially on Mobile devices such as Phones and Tablets.
Landscape-oriented images may look great on desktops, but because of their different aspect ratios, they will be cropped on small screens.Β
Using Divi's Responsive settings, you can make adjustments such as changing images or using ones with a different aspect ratio, for example, 2:3 for a portrait image with the subject in the center.
Generally, the height of the background image that you want to use on phones and tablets should be at least two times bigger than the width.
Divi's Responsive settings allow you to define portrait-oriented images for Phones and landscape-oriented images for Desktop.
Example
The following image can be used as a background image on any Desktop device
Using the Image Resizer app, you can create a different image with a different aspect ratio best suited for a mobile device, like the one shown below:
Using Responsive Settings to change the background image
Edit the element to which the background image was set
Go to Content Tab β Background β Background Image
Hover over the Background text and click on the Phone icon to enable the Responsive Settings
Switch to Phone Tab
Remove the Background Image
Set the new Background Image to be used on Phones