background image on Android

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.