Tips on Custom Header Image

If you visit https://www.governor5.com/ you’ll see the custom header image I inserted at the very top of the page (“David Blomstrom 4 Governor”). I accomplished that with the following style in a twentyfifteen-child style sheet:

@media all and (min-width: 956px) {
div#content { background: url(/images/site/header.jpg) no-repeat top left; background-size: 100%; }
}

However, at screen sizes smaller than 956 pixels, the design transforms into a single column, and the above strategy no longer works. Can anyone suggest a strategy for displaying the same header, spanning the entire page just above the site logo (Fifty Republic Pary), at smaller screen sizes?

I can either insert the actual image somewhere (I’ve already tried several places without success), or I can do another background image. (I’ve tried the latter without success as well.)

Thanks.