Hide A Divi Background Image On Mobile

How To Hide A Divi Background Image On Mobile

In this tutorial, I'm going to show you how to hide a Divi background image on mobile.
/*PEE-AYE CREATIVE – HIDE DIVI SECTION BACKGROUND IMAGES ON MOBILE*/

/*regular sections*/
@media only screen and (max-width: 980px) {
div.et_pb_section.pa-hide-background-image-mobile {
background-image: none!important;
}

/*parallax sections*/
div.pa-hide-background-image-mobile span {
background-image: none!important;
}
}

/*VISIT PEEAYECREATIVE.COM FOR MORE DIVI RESOURCES*/
/*PEE-AYE CREATIVE – HIDE DIVI SECTION BACKGROUND IMAGES ON MOBILE*/

/*method 2 for regular sections*/
@media only screen and (max-width: 980px) {
div.et_pb_section.et_pb_section_2.pa-hide-background-image-mobile {
background-image: none!important;
}

/*method 2 for parallax sections*/
.pa-hide-background-image-mobile div.et_parallax_bg {
background-image: none!important;
}
}

/*VISIT PEEAYECREATIVE.COM FOR MORE DIVI RESOURCES*/

This SECTION has a REGULAR background image that shows up on desktop, but does not show on tablet or mobile.

This SECTION has a PARALLAX background image that shows up on desktop, but does not show on tablet or mobile.

/*PEE-AYE CREATIVE - HIDE DIVI BACKGROUND IMAGES ON MOBILE
---------------------------------------------------*/

/*regular rows*/
@media only screen and (max-width: 980px) {
div.et_pb_row.pa-hide-background-image-mobile {
background-image: none!important;
}

/*parallax rows*/
div.pa-hide-background-image-mobile span {
background-image: none!important;
}
}

/*VISIT PEEAYECREATIVE.COM FOR MORE DIVI RESOURCES
---------------------------------------------------*/

This ROW has a REGULAR background image that shows up on desktop, but does not show on tablet or mobile.

This ROW has a PARALLAX background image that shows up on desktop, but does not show on tablet or mobile.

5

Last updated Jul 10, 2020 @ 7:59 pm

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.

OUR ONCE A YEAR SALE IS HAPPENING NOW!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

13 Comments

  1. Pranav

    Awesome tutorial really very helpful. Thanks for sharing.
    Please make one tutorial on how to add call to action button in divi menu.

    Reply
      • Riaz

        Hey Nelson, I am seeing the section background image CSS being output with !important by the divi builder. So the override in CSS gets overridden by the default output.

        Do you think this is a new change by Elegant Themes?

      • Nelson Lee Miller (aka The Divi Teacher)

        Hi Riaz,
        The example on this post is live, and it still works. The !important tag you are seeing is on desktop, but since we are not targeting that condition, we are overriding it with specificity on mobile. Is the code working for you?

  2. Katy

    For some reason it didn’t work? The background image still shows on mobile after adding the CSS class code and the custom CSS code. ?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Katy,
      The code I provided definitely works (as seen on the live example on the post) Be sure to choose either regular or parallax. Feel free to share the link so we can take a look.

      Reply
    • Shihab

      I also faced the same issue. I believe it’s a CSS priority issue in your case. So you can easily solve this issue by digging dipper one/two level up. What does it mean! If you inspect element, you’ll see that the background image selector is something like this: “div.et_pb_section.et_pb_section_0”. And if you check one level up, you’ll see that this section is wrapped within another div/class something like this: “et_builder_inner_content”. So now you can change/update your CSS selector by going one level dipper, something like this: “.et_builder_inner_content div.et_pb_section.et_pb_section_0”. So it will get more priority than your previous selector. But what happens when the background selector doesn’t wrapped by another div/class/id! In the article you see that how to give an element a custom class or id. So in that scenario, you’ve to give the element your own made class/id and then you can select the element more deeply. For example, if you found the present selector something like “.et_pb_section” then you can add your own css Class like “.own-class” and then you can update your css selector by “.et_pb_section.own-class” and this css will win because it’s more specific/dipper than previous.

      This doc might be helpful: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

      Reply
    • Angela

      Hi, I can’t get it to work either – my image isn’t parallax.
      See the image on the right in the green section next to Our Care conditions:
      https://robin.az.design/

      Any help would be much appreciated.

      Reply
      • Nelson Lee Miller (aka The Divi Teacher)

        Hi Angela,
        It’s strange that it works for some people and not others. I played around with it more and noticed you may need to just be more specific with your targeting. So try something like this:

        div.et_pb_section.et_pb_section_2.pa-hide-background-image-mobile {
        background-image: none!important;
        }

      • Paul Hickman

        Hi Nelson,

        I can’t get this to work. I’ve been very specific and when inspecting the code it looks like it is working, but unfortunately the background still shows.

        Please can you help? – the page is http://nss.webiproof.co.uk/who-we-are/

        .et_pb_section.et_pb_section_1.hideonmob {
        background-image: none !important;
        }

        Thanks,
        Paul

  3. Camilla

    Hi,

    It worked to remove my image with this code:

    div.pa-hide-background-image-mobile span {
    background-image: none!important;
    }

    But it only removes the image and not the “background”, so on my mobile is now a big emty colored space instead.
    How do I also remove this?

    Thank you!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Camilla,
      Thanks for your comment, it sounds like you have a background color set. I could show you more, but this article is now outdated as background settings can now be adjusted with Divi.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart