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.