[Resolved] background image on Android

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

[David]

Hi there,

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

[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

[David]

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

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

[David]

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

[Ben]

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

[David]

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

[Ben]

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

[David]

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.

[Author]

Posts