Адаптивная картинка background: как лучше сделать?

в зависимости от условий и фона чаще используется позиционирование фона: center top, center bottom, etc

ну и background-size, если необходимо

tommy-gung, фоновая картинка не показыватся на всю высоту, вот в чем проблема.

Так а:

Не подойдет? Не проверял, если что :)

Я не очень проблему понял, так что камнями не кидаться :)

есть background-size: cover;

можно для разных разрешений выводить разные фоны

Сам сайт на openserver сейчас. Вот создал пример, полностью как у меня сейчас:

https://jsfiddle.net/3ksy8zq7/

---------- Добавлено 07.03.2017 в 15:32 ----------

Хаха, нет, это точно не вписывается в мои представления о нормальном дизайне ))))

У меня через jquery примерто так же как вам надо, если я правильно понял:

$(window).resize(function(){
	$('.header').height( $('.header').width()/8.364 );
});
window.addEventListener('orientationchange', function() {
			$('.header').height( $('.header').width()/8.364 );
}, false);
$(document).ready(function(){
	$('.header').height( $('.header').width()/8.364 );
});

То есть ширина/коэффициент

P.S. Вкупе с background-size: 100% 100%;

так что ли нужно? https://jsfiddle.net/3ksy8zq7/4/

---------- Добавлено 07.03.2017 в 16:19 ----------

ну почему же. зачем грузить фон шириной 1920px для телефонов, например?

может пора представления менять))

была похожая проблема, дизайнеры понарисуют, а потом все должно масштабироваться куда-то... в итоге пришлось комбинировать для разных разрешений из 2х бекграундов, 3х картинок и бутстрап колонок... невозможно диз одинаково вписать и на 1920 десктоп и 320 мобилу.

Грубо говоря, да. Вообще для мобильников вообще будет другой header.

Спасибо, но я как-то не фанат делать по 100500 вариантов одной картинки. Это извращение.

Возможно требуется вот так сделать https://jsfiddle.net/jyskm2jo/1/