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.

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.

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.

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.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Related Posts

Leave A Response!

13
Leave a Reply

avatar
  Subscribe  
newest oldest most voted
Notify of
Pranav

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

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

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… Read more »

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.

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

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!

Child Themes • Plugins • Layouts

Visit The Shop

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

Browse By Hashtags

CSS Divi mobile snippets Tutorial

Pin It on Pinterest

0

Your Cart