Помощь в верстке сайта

Здравствуйте, прошел все интерактивные курсы на данном сайте, для практики скачал PSD шаблон сайта из интернета, начал верстать сайт, но столкнулся с проблемой. При установке относительных размеров хедера, фоновое изображение обрезается, а хедер принимает высоту контента. Мне же нужно чтобы хедер был такой же по размеру как и фоновое изображение, но при этом величины размеров должны быть относительными, потому что я хочу сделать сайт адаптивным. Помогите решить данную проблему, благодарю заранее!

Вот сам код
А вот так должно получиться

Желательно прислать в ответ исправленный код.