This CSS code is for a DWB screencast where I show how to make your Logo Image responsive, without the need for multiple images.

DWB Responsive Logo Image Trick

/* HTML5 5th @media query trigger point */
.site-header {
	min-height: 80px;
}
.header-image .site-header .wrap .title-area {
	width: 400px;
	height: 80px;
	background-size: 400px 80px;
}

/* HTML5 6th @media query trigger point */
.site-header {
	min-height: 60px;
}
.header-image .site-header .wrap .title-area {
	width: 300px;
	height: 60px;
	background-size: 300px 60px;
}

/* Pre-HTML5 5th @media query trigger point */
#header {
	min-height: 80px;
}
.header-image #header .wrap #title-area {
	width: 400px;
	height: 80px;
	background-size: 400px 80px;
}

/* Pre-HTML5 6th @media query trigger point */
#header {
	min-height: 60px;
}
.header-image #header .wrap #title-area {
	width: 300px;
	height: 60px;
	background-size: 300px 60px;
}