Автоматическое изменение размера блока в CSS. Как реализовать?

Question

[minor110]

Добрый день. Только учусь верстке и столкнулся с проблемой. Есть макет шириной 1600px. Есть изображение (1600х900), которое хочу использовать как фон в блоке header. Выставляю значение высоты и ширины блока как и изображение. Но при изменении окна браузера, изображение как бы обрезается слева и не полностью помещается в окно браузера. Пробовал использовать background-size, но не помогло.

Подскажите, как сделать, чтобы при изменении ширины окна браузера блок header изменял свою высоту и ширину в равных пропорциях? То есть был постоянно полностью виден во вьюпорте.

Код прилагаю. codepen.io/minor110/pen/VezJeZ?editors=010

Answer 1

[Сергей delphinpro]

codepen.io/anon/pen/xZLoJK

Comments

[minor110]

Спасибо.

Answer 2

[Evgeniy]

codepen.io/anon/pen/PZKrBj?editors=110