How To Hide A Divi Background Image On Mobile
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
—————————————————*/
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 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