Hide background image on mobile

How do I hide the background images in the different sections? They look terrible on mobile. 

Comments

  • This can be done only within css. Each section must have own ID and only then you can type css that will hide background images on mobile.
  • Can you give me instructions and show me an example code that I can use and customize please? Thanks. 
  • If you will create sections with background images and ID's for each section and will send us url to website where you did it then we can show you example.
  • That sounds more complicated than it should be. Please create a "disable background image on mobile" button for sections in future versions of be.

    I've seen quite a few people ask for it. Last time we asked, you deleted our forum account. 

    We will just disable those sections on mobile entirely. 
  • We'll think about it but at this moment we got tons of other requests in queue and we can't promise that this will be ready soon.

    BTW This is not complicated at all. But if "setup ID for section" is too difiicult for you then we have no idea how we can help you at this moment. We just asked about ID for section. We did not asked about anything impossible or difficult. When you edit section (what has been explained at http://themes.muffingroup.com/betheme/documentation/#section) you should type just Custom ID ( Custom CSS will be fine as well), like for example section-without-background-on-mobile and that's it.
  • edited November 2014
    I can CSS and I can add an ID to each section, thats fine. There are so many changes to the site regularly that it doesn't make sense to continue contacting you every time we need to make a change.

    It would be easier if you could just give me an example of the code.

    Here is the link:

    There are teal and salmon sections. We just want to hide the background image on mobile and leave the color. 

    I've named the first section "healthyGums"
  • This would be a great feature, can't wait for the solution :)
  • @Uniquewc As we see you created one section with "healthyGums" ID. So to remove background image for this section on mobile, please use below css:
    @media only screen and (max-width: 479px) { .healthyGums { background-image: none !important; } }
    @nightwhispers As we wrote, we'll think about it. At this moment it is possible with custom css only as we described above.
  • Thank you for the reply @muffingroup

    I have tried the same fix on my website but doesn't seem to be working

    @media only screen and (max-width: 479px) { .acasa-bg { background-image: none !important; } }

    tried to add this in the betheme custom css and also in the custom css of the page

    cleaningacademy.ro

    If you have the time please have a look

    Regards
  • This does not work because you setup ID name for section but in css you used code for CLASS. If you setup ID, then css should be as below:
    @media only screen and (max-width: 479px) { #acasa-bg { background-image: none !important; } }
    Remember that "." is responsible for class but "#" for ID.
  • Hi,

    I'm trying to hide the background-image of a section using the following code:

    @media only screen and (max-width: 767px) { .bg-image { background-image: none !important; }
    }

    But it's not working.

    This site is in under construction mode so I can't really link the page, but its a column within a Wrap, within a Divider in the Muffin Builder. Here's the section of code below with the URL I'm trying to hide, any help?

    <div class="column mcb-column one column_column bg-image column-margin-"><div class="column_attr clearfix align_left" style=" background-color:#faed00; background-image:url('http://pdmotorservices.co.uk/wp-content/uploads/2017/01/about-bg1.png'); background-repeat:no-repeat; background-position:right bottom; padding:30px 30px 35px;"><div class="column three-fifth">
    <div class="google_font" style="font-family:'Roboto',Arial,Tahoma,sans-serif;font-size:70px;line-height:70px;font-weight:100;letter-spacing:px;color:#091124;">07</div>

    <h3><a style="color: #595959;" href="/about">ABOUT US</a></h3>
    <p style="color: #595959;">Find out more about why I started PD Motor Services and how I like to look after my customers</p>
    <h6><a style="color: #595959;" href="/about">READ MORE</a></h6>
    </div>
    </div></div>
  • Hi,
    your css seems to be correct, without inspecting the website I cannot relly say much.
    Are you pasting this css into theme options>custom css&js>css?
    Try to delete browser cache.
  • Hi,
    I'm still struggling with this, can I provide access to view the site to someone and they take a look please?

    Thanks
  • @media only screen and (max-width: 767px) { .bg-image .column_attr { background-image: none !important; }
    }
    You said you want to remove a background section image, well then maybe edit the page and edit the section where you will find the background image set. All of this can be done in the muffin builder.
  • edited June 2017
    Thanks for the reply, but I think you missed my issue.

    The image url is located "inline" of the background element css. Giving it a custom class if not targeting the image specifically.

    The red bit of code below - 

    <div class="column mcb-column one column_column bg-image column-margin-"><div class="column_attr clearfix align_left" style=" background-color:#faed00; background-image:url('http://pdmotorservices.co.uk/wp-content/uploads/2017/01/about-bg1.png'); background-repeat:no-repeat; background-position:right bottom; padding:30px 30px 35px;"><div class="column three-fifth">

    The image is added to the column element background within the Muffin builder. It's overlapping the text when on mobile view. All I want to do is hide this on mobile and show on desktop, it can't be this difficult surely :( 
  • You can just simply hide the whole section on mobile, when you edit each section there is an option to hide/show it on various screen sizes.
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.