Skip to main content
How to Optimize Background Images for Mobile Devices

Optimize background images using Divi's Responsive settings ensuring the background images are displaying correctly on mobile devices.

Updated over 6 months ago

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

Example Background Image used on Desktop

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:

Example Background Image used on Phones

Using Responsive Settings to change the background image

  1. Edit the element to which the background image was set

  2. Go to Content Tab β†’ Background β†’ Background Image

  3. Hover over the Background text and click on the Phone icon to enable the Responsive Settings

  4. Switch to Phone Tab

  5. Remove the Background Image

  6. Set the new Background Image to be used on Phones

Enable the Responsive settings and change the section's background image

Further Reading

Did this answer your question?