Need Responsive or Alternate Header Virtue

(Note I am a newbie to this forum and had posted this question last week but I kept updating my post so I think it was overlooked because it may have appeared it was being replied to. I marked it resolved because I could not delete it. My apologies.)

I am using a test page for this problem, which is I need the headerclass image to be responsive. I added custom CSS but the headerclass image is so small it is not effective when viewed on a phone. Here is the test page:

http://www.lifepathbydesign.net/temp/

The code I added to the custom CSS to this page is:

.page-id-xx .headerclass {
height: 250px;
background: #fff
url(http://www.lifepathbydesign.net/wp-content/uploads/2016/02/BlogBanner.jpg);
width: 100%;
background-size: 100% auto !important;
}

I am guessing I 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, but plan is for the non-blog pages I want 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, to display the blog image header on the blog pages and posts. So I am not sure how to work around it especially to display two different images, one for blog pages, one for the rest and different sizes of each on phone sized screens. Here is the code I used to prevent the header from displaying on all pages

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

Please help.
Thank you.