background image not responsive in mobile settings

Good day folks,

Our background image for mobile view is not working. It does in the customizer, but not when you check it on mobile devices.

Our settings for the background image are set to custom – fill screen with NO Repeat background image and NO scroll with page.

Based on what we found on the web and other support forums we have tried the following sets of code with no success so far:

@media (max-width: 767px) {
.header-filter {
background-size: contain !important;
background-repeat: no-repeat !important;
}
}

@media (max-width: 767px) {
body.background {
background-size: contain !important;
background-repeat: no-repeat !important;
}
}

@media (max-width: 767px) {
body.background {
background-size: auto 100%;
background-repeat: no-repeat !important;
}
}

Any ideas on how to solve this issue? In advance, thank you for your help and interest.