Как быть с экранами смартфонов и background-image

Есть проблема: делаю ресайз header-а по высоте окна:

function wResize() {
    $('header').css('height', $(window).height());
};
wResize();

Это хорошо работает на больших и высоких экранах, но как только тестирую на экранах поменьше - возникает "выпадение" контента из background-image и получается некрасиво, примеры прикладываю:

Пример 1

Пример 2

Пример 3, здесь всё хорошо помещается

Как в таком случае поступать? Если не делать ресайз, то header, в котором всё находится будет ресайзиться по контенту, и скакать при переключении табов, это некрасиво, вот сам header:

header
min-height: 640px
background-image: url('../img/top_bg.jpg')
background-position: top center
background-size: cover
color: white
padding-top: 32px
padding-bottom: 40px