How can I make my header image properly responsive?

Question

I am trying to put a site together for a friend using a really nice premium Wordpress theme. I have paid for the theme but the designer will not help with customisation.

The site is currently at www.zerocarbonfood.co.uk/test/. Originally the theme had a small left-aligned logo but my friend favours this large full-width one, which I think works better. Problem is now that I look at it on an iPad or iPhone (portrait) the logo is too big and screws it up. In the theme options it is defined as 922px width and 168px height. I cannot put a percentage value in there. Can I override this in CSS somewhere?

Any help would be gratefully received as I am a bit out of my depth.

Answer 1

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;
}