How do I change the banner image background without changing the menu backround

I am using a child theme of twenty eleven. I have a banner image with a fixed maximum size but scales down with the window size.

What I’d like to do but can’t figure out is how to make the background colour grey under the image but not under the navigation menu, so that as the window scales up, the grey on both sides of the banner image stretches but as the window scales down the gray disappears and the image shrinks.

When I change the background of #branding it changes the background of the banner image but also changes the background color of the navigation menu which I don’t want.

For now, as a crude fix, I’ve added a grey background-image with x-repeat. This works for scaling up but not for scaling down.

I’m guessing the banner image has to be in its own div but I’m new to this and don’t know how to do it. Can anyone help?

https://www.loamclaystudio.ca/wordpress/