Substitute Zerif Lite bg image for mobile users

Like many users my background image works well in desktop view, but loses critical detail when viewed in mobile. Rather than try to make the background work on mobile, I wondered if I could just grab a different image for mobile visitors…

Is it possible to change to a different background image when in mobile view by adding to css something like this example from stackoverflow:

@media (max-width: 702px){
body.custom-background {
background-image: url("http://staging-mysite.com/wp-content/uploads/2016/06/mobile-bg.jpg");
}
}