Как добиться адаптивного отображения фонового фото?

Question

[Max Rudik]

Добрый день!
Моя задача - добиться отображения фонового фото на весь экран устройства по ширине и высоте.
Пробовал

width: 100%;
height: 100%;

background-size: contain;

background-size: cover;

Ближе всего к решению задачи работает

header{
	background: url('Bench-At-Brighton1.jpg') no-repeat;
	background-size: cover;
	margin: 0 auto;
	height: 586px;
}

,
но у этого варианта неадаптивная высота, а мне нужно, чтобы изображение занимало весь экран независимо от его конфигурации. Такое возможно?

Answer 1

[SirMustache]

width: 100vw;
height: 100vh;

Comments

[Max Rudik]

не сталкивался раньше с vw, но это к сожалению не работает

[SirMustache]

Max Rudik: Разве?
codepen.io/Sir_Moustache/full/gPbvMw

Answer 2

[Just_Andrew]

function setHeiHeight() {
    $('header').css({
        height: $(window).height() + 'px'
    });
}
setHeiHeight();
$(window).resize( setHeiHeight ); //

Answer 3

[edk55]

background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: 50%;