Need help? Check out our Support site, then


Remove background image from mobile only

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

  2. 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;
    }
  3. 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.

  4. fabianapsimoes
    Staff

    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.

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

  6. fabianapsimoes
    Staff

    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!

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

  8. Got it. This worked:

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

  9. fabianapsimoes
    Staff

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic