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;}
try using max-width: 100%; height: auto; this should resize the image properly.
You can use following media condition in css
/* Resize Background*/@media only screen and (max-width: 800px) { #header{ width: 100%; height: auto; background-size: 100% auto !important; }}