Can't get background header image to fit to width.. tried everything

Question

I've searched for hours upon hours and now I figure it's time for me to ask the question. I can't get my background image that is placed in my header to fit to screen. It works for every kind of computer resolution fine, but where I run into trouble is when I am viewing on a phone, it doesn't want to shrink. I've done min-height, max-height, I've tried everything, the problem partly I think is that the header div itself is smaller than this image, but I also don't really know and need some guidance, i'm relatively new to the CSS scene.

Here is what I have:

#header {
    background-image: url('http://hamsoc.polymath.io/wp-content/uploads/2013/05/hamsocheader.png');
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 209px;
}

Website url is http://hamsoc.polymath.io

Thank you for your help in advance!

Duncan Beattie gave me the answer and it worked like a charm. Here is what he said:

"You have background-size: cover which is fitting the height of the background image to the fixed height of your div, 209px. remove the fixed height and replace with padding-bottom:15% this will kep the aspect ratio of the div the same and scale the image as viewport gets smaller."

Solution 1

You have background-size: cover which is fitting the height of the background image to the fixed height of your div, 209px.

remove the fixed height and replace with padding-bottom:15% this will kep the aspect ratio of the div the same and scale the image as viewport gets smaller.

Solution 2

I would suggest having the header image in your HTML rather than a background image and then setting a max-width like so:

#header img{
    max-width: 100%;
    height: auto;
}

This will also allow you to make the image "clickable" which is generally wanted in a header logo.

DEMO FIDDLE

FULLSCREEN