Blurry background in mobile devices

I am using the cherry framework and I am having a problem with my background image. The full-screen background image in my sites is looking blurry. The stranges part is this doesn’t happen for all the pages, but most of them. Looking at the pages from a desktop at mobile view looks completely fine, but when I view it on a mobile device it is all messed up.

We tried media queries to solve the issue but had no luck.

  • James Morris
    • WordPress Enthusiast

    Hello Andrew,

    I hope you are well today. I’ll be following up with you regarding your chat.

    I’ve just checked your site and browsed through your top level navigation on desktop and mobile. I’m afraid I’m not seeing any blurriness that isn’t part of the focus of the image itself. The only exceptions are the smaller graphics on the homepage where you are using 256 images scaled to 345. But even that is decent. Really, the site looks fantastic on my end. :slight_smile:

    Were you able to resolve this issue? If not, would you please let me know which pages I should be looking at and, possibly give me a better idea of what the images should look like?

    Best regards,

    James Morris

  • Katya Tsihotska
    • Support & QA

    Hi Andrew

    Hope you had a wonderful day!

    I’ve found that background image was blurry because on mobile devices it was stretched to the full height of the content as the content on mobile devices is very long due to the small device width, the picture becomes blurry. To fix this issue I’ve replaced this CSS:

    /***background image sizes***/
    body:after{
    content:"";
    position:fixed; // stretch a fixed position to the whole screen
    top:0;
    height:100vh; // fix for mobile browser address bar appearing disappearing
    left:0;
    right:0;
    z-index:-1; // needed to keep in the background
    }
    body
    {background-image:url('http://www.therevrepublic.com/wp-content/uploads/2017/09/body2-min.jpg');
    background-size:cover;
    }

    with the following:

    /***background image sizes***/
    body:after{
    content: url(http://www.therevrepublic.com/wp-content/uploads/2017/09/body2-min.jpg);
    position: fixed;
    height: 100vh;
    right: 0;
    top: 0;
    left: 0;
    z-index: -1;
    }

    All changes were done here: Appearance > Customize > Additional CSS.

    Now it’s not blurry for me on my mobile. Please, check how it looks on yours and let us know if it’s still not fixed for you.

    Kind regards,

    Katya

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.