Divi – Breaking The Laws Of Physics
Many people assume there is a limitation in Divi prohibiting us from making responsive section background images. This, however, is not so. Many people seemingly expect to break the laws of physics when demanding that Divi fix their issues. But there are no issues, only misunderstandings. This post will help clear them up and guide you in creating responsive background images for your Divi header hero sections. In this tutorial, I will show you some tips and tricks to make responsive Divi background images.
▶️ Please watch the video above to get all the exciting details! 👆
Understanding The Purpose For Background Images
The first thing I want to mention is that background images in a section, row, or module are considered “decorative.” You cannot assign ALT text to background images, and they have no SEO value. They are purely decorative in the sense that there is no contribution to help a search engine find your site. This means they do not serve the same purpose as an image in an Image module. If your images are loaded as <img> tags (like the Image module) then they have a ALT text. But background images are not regular images, they are loaded only with CSS styling, and therefore they do not have a title or ALT text.
A background image may be included to make the website more visually attractive, but that’s the only real value you get from them. Decorative images are not functional, meaning they do not add information to the content of a page. You may find yourself disagreeing with this, but it’s true. If you are using the background image for some functional purpose, it would be wise to provide some text for that purpose instead.
To learn more about this, check our full guide images and SEO in Divi.
Overview Of Background Image Settings In Divi
All backgrounds in Divi have the same settings, whether in a section, row, column, or module. The background settings are always located in the Content tab.

Notice there are four tabs with icons:
- Color
- Gradient
- Image
- Video
These can be used independently or creatively combined. The purpose of this tutorial is to focus mostly on responsive image backgrounds, so I will be moving on to that. Take a look over all the settings that are available in the image tab. We’ll discuss the most relevant settings in the rest of this tutorial.

Only One Set Of Responsive Background Settings
This struck me as odd, but each of the settings within the background tabs do not have their own independent responsive tabs. Instead, there is only one main setting for Desktop, Tablet, and Phone located in the main background setting.

Keep this in mind, and more than likely, keep these tabs open if you are having struggles getting your background images to be responsive.
#1. Use Different Background Images
The first setting may be obvious, and yet one aspect of this is often overlooked. If you are like me, you probably quickly choose your image and move on. But don’t forget the responsive settings! One of the quickest ways to solve any awkward responsive image issues with your header section is to simply set a different image for each device, Desktop, Tablet, and Phone. Whether you think this is brilliant or obvious, it’s true! If you didn’t realize this setting existed, that’s okay, because a few years ago this setting was not available in Divi, but Elegant Themes snuck in the new settings back when they released version 3.27 released August 15, 2019, the SRCSET responsive images update.
#2. Swap image With Background Color
Another very similar method like tip #1 is to skip adding a background image on a certain device, such as Phone, and use a background color instead. This is a pretty common scenario that would solve a lot of issues. Remember, the background image is decorative, so technically you can do without it. As the screen becomes portrait oriented (taller than wide), the background image may no longer work well at all. Rather than forcing an awkwardly cropped image, just remove it. Use white or another color in its place.
#3. Change The Background Image Position
Another way you can help make your background images look great on all devices is to set the position differently on each device. Many of you may not know this is possible, but it is, and it can be a clever way of helping to align the image with whatever text you have in front of it. Like the other settings, this was not available prior to version 3.27.
There are nine options under the Background Image position setting, and the default is Center. But why not change this per device? Maybe use Center on desktop and Top Left on Phone. I’m not saying this will solve the issue, but depending on the graphics in the image or where they fall based on screen size, this could be a potential solution to help make your Divi background images responsive.

#4. Adjust Background Image Size
My final suggestion would be to consider the background image size. One of the important options in the background image settings is Background Image Size. By default, this is set to Cover, but there are three options to choose from, Cover, Fit, and Actual Size. However, this will almost always need to be set to Cover, but I’ll explain each option below just in case you need to use them.

Cover
Cover means the image will always adjust size to completely cover the entire area of the container. This means the image sometimes crop as necessary to conform to the shape needed to cover the entire background area.
Fit
Fit means it will always change size in order to fit inside the parent container without cropping. This is the direct opposite of cover. The entire image will always be visible no matter what. Keep in mind, this may result in blank spaces around the edges of the image when the image is a different shape than the parent container.
Actual Size
Actual size means the image maintains the same pixel width and height dimensions and aspect ratio as what is uploaded. The image will not be resized or cropped at all, even if the parent container changes size or shape.
#5. Other Tips For Responsive Background Images
There are some other related factors that can play a big part in making a responsive section.
Text Size
The most obvious thing is text size. If your heading text is too big, it will make the section super tall on mobile and also look horrible. So make sure to set different font sizes for Desktop, Tablet, and Phone.
Spacing
Another more obvious factor is spacing, especially padding. If you have too much padding, the background image size will be forced to conform to that spacing, and alter the shape and viewable area of the image. Keep in mind it may look good on one device size but not another, so be sure to check and just any section padding.
Sizing
Along with spacing, the width of the row may also be a factor. You may want to keep your content somewhat more narrow on Desktop, but on Phone it may help a lot to make it as wide as possible, like 90% wide.
Hi Nelson,
I am trying to figure out if each breakpoint type (desktop or mobile for example) downloads the other two background images – in my case, three different crops of a background video. Do you know?
Hi Brian!
To clarify, are you referring to the background image or videos? Also, can you share the page URL to understand better?
What sizes do you recommend for laptops, tablets, mobiles? (to have different background images), thanks.
Hey Alejandro,
These are the image sizes:
Design for desktop displays from 1024×768 through 1920×1080
Design for mobile displays from 360×640 through 414×896
Design for tablet displays from 601×962 through 1280×800
Hi, Nelson. I had a thought on this in terms of how I use background images, and I am probably not the only one. If I’ve got a two column row, and I want text or a CTA in one column, and an image in the other column, the easiest way to do that is to set the image in the other column as a background image rather than by adding an image module, because then it auto-resizes with the text module or CTA. But on mobile, when the two columns are stacked, the image either almost or completely disappears because there is no other column next to it to maintain its size. There are various hacks to work about this, like a transparent image added in an image module to force that column to stay visible, but I was curious how you approach that kind of scenario, Thanks as always for creating and sharing these videos, they are always really helpful.
Hi Gil,
You mentioned that the easiest way would be to set the image as the column background, but that is not recommended. In that way the image is only decorative and not functional, so in my opinion the situation should usually be avoided. When possible, us the Image module in the column. However, if I faced this for some reason, I would simply add a Divider module to the column and set the height of it to make the column stay a certain height.