Update: Divi has released an update that allows for responsive background settings which include adding a different background image on desktop, tablet, and phone.
A Common Problem
How To Hide A Divi Background Image on Mobile
I see the question of how to hide a Divi background image on mobile over and over in the Divi Facebook groups. Some wonderful helpful folks offer solutions, but many times it is difficult for less experienced users to understand. NOTE: adding two sections and hiding/showing one of them on
Step 1
Add Custom CSS Classes To Section
Be sure to add your background image to the section. Then go to the Section Settings>Advanced>CSS Class and type or paste “pa-hide-background-image-mobile” into the field.
Step 2
Add The Custom CSS Code
In your Dashboard, go to Divi>Theme Options>Custom CSS and add the following code and hit save. This code has the solution for both regular and parallax sections all in one!
/*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*/Not Working? Try These
Some readers are reporting that the above code no longer works. This is most like due to an issue of specificity, meaning the CSS code is being overwritten and is not specific enough for that section. To solve that, try these snippets and try to notice what we are changing so you can experiment with different section numbers such as .et_pb_section_4 etc.
/*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*/
Live Examples
Yay! ???? Now you know how to hide a Divi background image on mobile!
Bonus! Row Background Images
Add This Snippet For Rows
In your Dashboard, go to Divi>Theme Options>Custom CSS and add the following code and save. This code has the solution for both regular and parallax ROWS all in one!
/*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
---------------------------------------------------*/
Awesome tutorial really very helpful. Thanks for sharing.
Please make one tutorial on how to add call to action button in divi menu.
Hi Pranav, thank you, glad this was helpful! Sure, I can add that to my list!
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?
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?
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. ?
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.
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… Read more »
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.
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;
}
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
Hi Paul, I looked and it is working. Which hopefully means you figured it out! Let me know if you need any help!
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!
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.