Как правильно сделать адаптивной шапку?

нужно что бы картинка уменьшалась а не обрезалась(

нужно что бы картинка уменьшалась а не обрезалась(
то есть что бы была полностью видна

De Slow, background-size:cover;

А зачем строгая высота у шапки?

.site-header {
    min-height: 435px;
}

Я бы сделал так

Элементу с фоном {
    background-image: url(/templates/Default2/_include/img/header_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}
.site-header {
    min-height: 110px;
}

Gusto, но тогда в полной версии шапка всего 110 px а нужно что бы была полная.. такс height 100% Не решает пробелмы
отдельно в responsive прописывать для устройств высоту?

De Slow, тогда медиа-запросами под каждое разрешение подгоняй высоту шапки.

нужно что бы картинка уменьшалась а не обрезалась(
то есть что бы была полностью видна на всех разрешениях....

Так дело не в логотипе, а в шапке именно картинке которая вверху занимает весь экран в ширину

De Slow, Так и что в итоге вы хотите? Вам нарисовать дизайн шапки на разных устройствах?

Артем Пономарев, Нужно чтобы картинка хедера постоянно масштабировалась . Т.е входила целиком от края самого изображения до края и полностью без срезания краев, а получается так:
На большом экране все входит и все детали изображения попадают в кадр, а на маленьком экране боковые области изображения обрезаются. Т.е картинка заполняет область экрана но ее боковые части не входят.. (т.е. они за пределами видимости окна)

Kir, аа, так вы про background шапки, а я то думал про логотип)
Но как я вижу вы уже все сделали?)