レスポンシブデザインで背景画像のアスペクト比を維持する

CSSで背景に画像を敷いて、レスポンシブデザインにする場合
アスペクト比が維持できない。

幅は％指定でできる。
高さはどうするか？

#header {
	width: 100%;
	background: url(./img/main.png);
	border: 1px solid red;
}
	/* 高さを幅の % に固定 */
	#header:before {
		content: "";
		display: block;
		padding-top: 35%;
	}