How To Make Responsive Divi Background Images Tutorial by Pee Aye Creative

How To Make Divi Background Images Responsive

In this tutorial I will show you how to make a responsive Divi hero section background image to look great on all devices.
Categories: Tutorials

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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.  

background image settings in Divi 1

 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.

overview of all background image settings in Divi

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.

responsive Desktop Tablet and Phone settings for Divi Background settings

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.  

Divi responsive background image position settings

#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.

background image size options in Divi 1

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.

 

Last updated Dec 7, 2021 @ 1:06 am

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore 🙂

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

4 Comments

  1. Gil Poulsen

    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.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply
  2. Alejandro Cepeda

    What sizes do you recommend for laptops, tablets, mobiles? (to have different background images), thanks.

    Reply
    • Hemant Gaba

      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

      Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart