Remove background image from mobile only

  • Author
    Posts
  • #1408621

    deadpants
    Member

    Hello. I have a nice looking fixed background image set on my blog, but when viewing my blog from a mobile device the image appears once at the top of the screen and then abruptly cuts off and it generally just doesn’t look good. How can I prevent the image from showing up on a mobile device via CSS?

    The blog I need help with is whereweat.net.

    #1408735

    You could delete your background image for the mobile by using the correct body class. Give the following a try and see how it works for you.

    body.mobile-theme {
    background-image: none;
    }
    #1408737

    deadpants
    Member

    Unfortunately not. Does that only work if you have the mobile theme enabled? My blog uses the Ryu theme which is already deemed mobile friendly, and it happens to look really good on a mobile, so I keep the “mobile theme” disabled. Hope that makes sense.

    #1408740

    Hi @deadpants,

    You are right. This solution applies custom CSS to the WordPress.com mobile theme.

    Could you try the following CSS?

    @media (max-width : 480px) {
        body.custom-background {
            background-image: none;
        }
    }

    This is a CSS media query. It will apply the “body.custom-background” CSS rule only when the screen is no wider than 480px – that’s why we say “max-width: 480px”. You can tweak this “480px” value as you wish.

    #1408791

    deadpants
    Member

    Nice one fabianapsimoes, it worked! I tried something similar to that before but without the max-width thing. Cheers for the help!

    #1408792

    You are welcome, @deadpants!

    If you are interested in CSS Media Queries, here goes a nice introduction: http://www.binvisions.com/tutorials/css3-media-query-tutorial-introduction/

    Please let me know if you have any questions!

    #1408793

    deadpants
    Member

    Okay. Thanks again. And since you mention it, I do have another issue i’m trying to resolve. When I create a standard style post with this theme and I place an image at the top of that post, the top of the info area on the left (meta bar I think it’s called?) and the top of the image are not quite horizontally in line with each other. I have seen on other blogs using the “Ryu” theme where it’s normal for these two parts to be aligned, and of course it looks better. Maybe there is something i’m not doing right when I create the post or maybe it’s a problem with my existing css entries, I think the former though. Any ideas?

    #1408795

    deadpants
    Member

    Got it. This worked:

    .entry-content, .entry-summary {
    margin-top: 27px;
    }

    #1408811

    Awesome, @deadpants!

    Just so you know, a good way to figure out how to tweak your CSS is using your browser’s developer tools. Generally speaking, you can right-click any elements in your page and select the “Inspect Element” option. You will see a panel with the HTML for that element and, on the right, the CSS rules applied to it. Here is more information on how to use this tool to find CSS selectors: https://dailypost.wordpress.com/2013/07/25/css-selectors/

    Happy blogging!

The topic ‘Remove background image from mobile only’ is closed to new replies.