Adjusting heigh of parent div to show background image in CSS

I'm making my site kocher.co responsive. The problem I'm having is that I can't get the background for the header to scale to the hight of the child divs.
In other words, when the logo image scales down, I would like the rest of the header to scale its height down too so I'm not left with extra background image space. So far I can only show the background image by setting a fixed height.

.site-header {
	padding: .75em 1em;
	background: #309049;
	background-image:url(http://flippedclassroom.ca/wp-content/uploads/2013/03/green.jpg); /* LINK THIS PERMINANTLY!!! */
	height: 100px;
	}

Is there a way to have the hight associated with the background image scale to the high of the child div?