Code by Day | Explore By Weekend

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 Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

Subscribe
Notify of
guest
13 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Pranav
1 year ago

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

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?

Katy
Katy
1 year ago

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

Shihab
Reply to  Katy
1 year ago

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 »

Angela
Reply to  Katy
1 year ago

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.

Paul Hickman
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

Camilla
Camilla
1 year ago

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!

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

Join over 5,200 others and subscribe to our helpful Divi videos!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart