Header Image on mobile device only

My site is www.franciscanfriars.org I am using Catch Base Pro I have used custom CSS to get a image behind the Header text, it is referred to as a background image in the CSS code... I like the way it looks on the large screen, full size display, because the menu serves as a boarder between the background image and the featured content slider. However, on mobile devices, since the menu is different, there is no border between the header image and the featured content slider, and the two images clash. I would like to put a border, or a black line at the bottom of the header image on mobile devices only. Note: I have found a solution that kinda works..I created a header image that is a black bar, and inserted it "Before Menu" on the entire site. However, I would prefer to not use header image on full site, but only on devices below 980 pixels. Is that possible????