Virtue Headerclass Need it to be Responsive

OK I replaced the

background-size: cover;
width: 100%;

with

background-size: 100% auto !important;

and now it’s responsive but – the image is so tiny it’s irrelevant on a phone. I would like it to just go away on a screen that small.
Thanks

UPDATE
I am using a different test page now:

https://www.lifepathbydesign.net/temp/

Our objective is to have a header image that looks good on a desktop or phone. We probably need to have an image that is taller and narrower display on small-screened devices, so two images. Is this correct? I am only displaying header image on the blog pages now.

Also, for the rest of the site – home, about, etc. – we want to add a different header image.

Because I only wanted the headerclass image on the blog pages,I had added CSS to not display the headerclass and am using the pageids/postids, as you can see from my post above, to display the blog image header on the blog pages and posts. Here is the code (from this forum ) to prevent the header from displaying on all pages

.headerclass {
background: url(none);
width: 100%;
background-repeat: no-repeat;
}

Hope this helps clarify.