Background-image не раскрылся полностью, как решить?

Question

[Alekosh Akhosh]

День добрый!
Не понимаю как раскрыть картинку полностью, но когда открываю DevTools - картинка полностью раскрыта. Как решить?

.background {
        background-image: url(/img/Group.png);
	background-repeat: no-repeat;
	height: 100vh;
	min-height: 892px;
	background-size: cover;
	// width: 24vw;
	// background-position: center;
}

Comments

[MrColdCoffee]

100vh это 100% высоты области просмотра
+ background-size: cover;

всё выглядит правильно

[Ankhena]

Сделайте песочницу на jsfiddle.net или дайте ссылку на пример.

[Alekosh Akhosh]

Ankhena, https://jsfiddle.net/4xm7dpfb/2/
p.s. в развёртуном режиме нормально, а в полном странно

[Ankhena]

Alekosh Akhosh, я не права сегодня про jsfiddle и пишу по привычке, извините.
Не открывается он совсем последние дни.
Лучше пока codepen.

[Alekosh Akhosh]

Ankhena, Ничего страшного. https://codepen.io/Alekosh/pen/WNXLNGX

[Ankhena]

Alekosh Akhosh, так у вас высота блока 100vh. Если контента больше, чем на 100vh, то он вываливается из блока.
Блок закончился, его фон тоже.

Разумнее убрать по 892 и поставить min-height 100vh.

[Alekosh Akhosh]

Ankhena, Поставил, спасибо. Картинка и вправду большая(1440х892), но если дополнить текстами с помощью lorem500-1000, то картинка полностью видна. Что можно поделать в таком случае?

[Ankhena]

Alekosh Akhosh, вариантов не так много:
1. Я выше написала, задать блоку min-height 100vh, убрать про 892. Тогда блок будет растягиваться по содержимому, если его много. А если мало, то занимать всю высоту окна.
2. Оставить 892, но убрать про 100vh.
3. Оставить и то и другое, но добавить overflow.

[Alekosh Akhosh]

Ankhena, Благодарю!