Как создать фоновое изображение полной ширины с переменной высотой в зависимости от содержимого?

Question

Я просто пытаюсь разместить фоновое изображение на веб-странице с шириной 100%, чтобы оно масштабировалось, чтобы соответствовать области просмотра. Это прекрасно работает, если изображение сразу после тега body используется в следующем стиле:

img#background {
min-width: 800px;
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}

Это работает нормально, единственная проблема заключается в том, что я хочу, чтобы изображение обрезалось снизу, если высота содержимого меньше высоты изображения таким же образом, как фоновое изображение. Поэтому, если содержимое страницы имеет высоту только 400 пикселей, фоновое изображение должно быть только 400 пикселей (даже если при масштабировании полная высота должна быть больше этой). Я не уверен, как это сделать, используя чистый CSS (без JavaScript), поэтому был бы очень признателен, если бы кто-то мог указать мне правильное направление?

Answer 1

Попробуйте добавить <div> со следующими атрибутами CSS:

overflow: hidden;
left: 0;
top: 0;
position: absolute;
z-index: -9999;

Answer 2

Вы можете поместить его в свой контент и установить контент на overflow: hidden.