Twenty-Eleven on mobile: Almost…

I have a new client using the Twenty-Eleven theme. I just “inherited” the site from a long-gone creator.

I’ve got it all responding well on mobile devices now, except that the author seems to have constructed the “header” in an odd (at least to me…) way.

Instead of specifying a header image (it’s set to none), the site’s header-like image is actually a bg image on the #page element. (If it were me, I’d have set the image as a bg to the header element, and then positioned the h1 and h2 elements via CSS…whatever)

When the site loads on a tablet, f’rinstance, all is well, except that the #page bg image doesn’t resize. The image is 1000px x 153px. Here’s the relevant CSS:

#page {
background: url(/images/header-bg007.png) no-repeat 0px 12px;
margin: 2em auto;
max-width: 1000px;
clear: both !important;
display: block !important;
float: none !important;
max-width: 100%;
position: relative !important;
}

Is there a simple way to get the bg image to resize in this context?

TIA!