Automatically resizing footer image – height problem

I want the background image in my footer to resize proportionately, just like the header image automatically does.

And I’ve achieved that mostly, but am running into a problem:

If I understand correctly, the height/width in the stylesheet need to be set up this way for automatic resizing:

max-width:100%;height:auto;

But when I apply that, “auto” doesn’t find the height of my background image, and the div collapses, showing almost nothing of the image.

If I change that “auto” height to the pixel size of my background image, it looks great until I resize. Then the div height (of course) remains at that pixel value instead of shrinking.

Here’s the footer code:

#colophon {
	position:relative;
	background: url(images/RAMS_footer.png) center top no-repeat;
	background-size:100%;
	max-width:100%;height:auto;
	padding:0px;
        border-top: 0;
	margin-top:0px;
	margin-top:0rem;
}

And here’s the site:

http://ratchetsaway.com

Thanks!