Фон обрезается, когда HTML и высота тела установлены на 100%

Question

У меня html и body установлены на 100% высоты, а на теле установлено фоновое изображение, которое обрезается при прокрутке вниз, как показано ниже.

Тем не менее, YouTube имеет 100% высоты для html и body, а также фон для body, и он растягивается на всю высоту контента.Как мне этого добиться?

Answer 1

Если only причина, по которой вы указали высоту 100%, относится к фону (как вам может показаться в одном из ваших комментариев), просто измените его на min-height: 100%, и у вас не должно возникнуть проблем.У вас будет 100% рост на коротких страницах, но при увеличении вы увеличите его на более длинные страницы.

Answer 2

Вы не можете увеличить изображение, если не знаете точную общую высоту.Фоновое изображение «Расширено» до дна.Часто веб-сайты используют изображение, которое медленно «выцветает» до сплошного цвета, а затем фон устанавливается на этот сплошной цвет.

Другое распространенное решение - пометить фоновое изображение как фиксированное, чтобы оно не 't прокрутки и, следовательно, всегда показывает, как и ожидалось.

100% рост на теле является мошенничеством ... 8-) Обычно он представляет 100% окна, а не тела.

Answer 3

Фоновое изображение не будет автоматически растягиваться, чтобы заполнить свой контейнер.Если вы хотите создать «непрерывный» фон, вы должны использовать либо свойство repeat-y (которое заставляет изображение повторяться по вертикали), установить background-position: fixed или, в случае сплошного цвета, просто установить цветнойbackground.

В вашем случае, похоже, ваш фон сплошной.Могу ли я предложить просто использовать простой цвет фона?Это облегчает чтение и изменение вашего CSS, а также экономит пропускную способность вашего сервера.