How can I make my header image properly responsive?

The easiest way to deal with it is to insert the logo image inline rather than as a background image. That way you can apply CSS to the img element itself;

HTML

<div id="logo-container"><a href="http://www.zerocarbonfood.co.uk/test"><img src="http://www.zerocarbonfood.co.uk/test/wp-content/uploads/2013/07/wide-logo-2.png" alt="" /></a></div>

CSS

#logo-container img {
   width: 100%;
   height: auto;
}