[Resolved] background image on Android

Home Forums Support [Resolved] background image on Android

Home Forums Support background image on Android

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #879767
    Ben

    Hi

    My header has a left-aligned logo on a white background. My header has a background image on the right-hand side, which is right-aligned, non-repeating, set to ‘attachment’ and ‘right’. When the browser width gets so narrow that the background image tries to overlap with the logo, I want the background image to disappear. I have this working perfectly on desktop, ipad and iphone, on firefox, chrome, safari and edge browsers.
    However, on Android phone (chrome) the background image doesn’t disappear at all, and instead goes underneath the logo. I’m using the following CSS on my header:

    /* hide header image on small browsers */

    @media
    (max-width:800px) {
    header {
    background-image: none;
    background-size: 100%;
    background-attachment: fixed;
    }
    }

    /* force mobile menu when width is at 800px */

    @media
    (max-width: 800px) {
    .main-navigation .menu-toggle,
    .main-navigation .mobile-bar-items,
    .sidebar-nav-mobile:not(#sticky-placeholder) {
    display: block;
    }
    .main-navigation ul,
    .gen-sidebar-nav {
    display: none;
    }
    [class*=”nav-float-“] .site-header .inside-header > * {
    float: none;
    clear: both;
    }
    }

    *edit* I don’t think I did a great job of explaining that! Have a look at my site on a desktop browser and shrink the width of the browser until the right-hand header background disappears. This is how it should behave, and does behave on iphone, ipad and desktop… just not on Android.

    GeneratePress 2.2.2
    GP Premium 1.8.1
    #880160
    David
    Staff
    Customer Support

    Hi there,

    i can’t replicate the issue using browser tools – is it a particular device you’re using ?

    #880176
    Ben

    Good afternoon David.

    Yes, I only see the issue on my partner’s Samsung Galaxy A5 (running Chrome). It’s the only Android device I have access to. The hummingbird picture goes underneath the logo and it looks ugly.

    On iphone and iPad (chrome and safari) it works great. On desktop (chrome, firefox and edge) it also works great. On these devices the hummingbird disappears, as it should do.

    Thanks

    Ben

    #880233
    David
    Staff
    Customer Support

    Can you try clearing the phones browser cache. May require a few attempts and even powering the phone down if it doesn’t work.

    #880259
    Ben

    I’ve completely cleared the phones browser cache multiple times but that still doesn’t resolve it. In both portrait and landscape mode the background image is still there, with the logo overlapping it.

    #880267
    David
    Staff
    Customer Support

    Before we look deeper, if you open an Incognito browser on that device does the issue still persist?

    #880275
    Ben

    Yes, I’ve just tried an incognito tab and the problem is still there. Sorry!

    #880282
    David
    Staff
    Customer Support

    In your CSS you’re using header as the selector to hide the background image. Replace that with .site-header

    #880297
    Ben

    Thank you very much David. That appears to have done the trick 🙂 I’ll mark this topic as ‘resolved’. Thanks again!!

    #880314
    David
    Staff
    Customer Support

    Sorry for the run around – i should have checked the CSS a little closer. Seems that device does something different with the header tag. Glad to hear its resolved.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.