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!
LypQRUUtQVlFIENSRUFUSVZFIC0gSElERSBESVZJIFJPVyBCQUNLR1JPVU5EIElNQUdFUyBPTiBNT0JJTEUKLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tKi8KCi8qcmVndWxhciByb3dzKi8KQG1lZGlhIG9ubHkgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA5ODBweCkgewpkaXYuZXRfcGJfcm93LnBhLWhpZGUtYmFja2dyb3VuZC1pbWFnZS1tb2JpbGUgIHsKYmFja2dyb3VuZC1pbWFnZTogbm9uZSFpbXBvcnRhbnQ7Cn0KCi8qcGFyYWxsYXggcm93cyovCmRpdi5wYS1oaWRlLWJhY2tncm91bmQtaW1hZ2UtbW9iaWxlIHNwYW4gewpiYWNrZ3JvdW5kLWltYWdlOiBub25lIWltcG9ydGFudDsKfQp9CgovKlZJU0lUIFBFRUFZRUNSRUFUSVZFLkNPTSBGT1IgTU9SRSBESVZJIFJFU09VUkNFUwotLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0qLw==
[/et_pb_dmb_code_snippet]
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.